时间戳

首页 > 解决方案 > 列宽不相等

html - 列宽不相等

问题描述

我的引导列宽不相等，尽管将它们设置为相等列宽不相等。我使用 col-sm-6 设置它们。两者不相等，一小一大。如果您知道如何解决此问题，请提供帮助。我希望他们可以在移动设备和笔记本电脑上工作。提前致谢。

    <div class="container"><div class="row">
<div class="col-sm-6" >
<h1 id="h1Codespeedy">Codespeedy Intern</h1>
<ul>
    <a href="https://www.codespeedy.com/implementing-an-lstm-cell-in-python/" target = "_blank"><li class="list-group-item">Implementing an LSTM cell in Python</li></a>
    <a href="https://www.codespeedy.com/understanding-deep-belief-networks-in-python/"target = "_blank"><li class="list-group-item">Understanding Deep Belief Networks in Python</li></a>
    <a href="https://www.codespeedy.com/merge-overlapping-intervals-in-cpp/"target = "_blank"><li class="list-group-item">How to Merge Overlapping Intervals in C ++</li></a>
    <a href="https://www.codespeedy.com/understanding-deep-belief-networks-in-python/"target = "_blank"><li class="list-group-item">Python | Understanding Style Transfer using CNNs</li></a>
    <a href="https://www.codespeedy.com/machine-learning-model-to-predict-bitcoin-price-in-python/"target = "_blank"><li class="list-group-item">Machine Learning Model to predict Bitcoin Price in Python</li></a>
    <a href="https://www.codespeedy.com/find-k-th-smallest-divisor-of-a-number-in-cpp/"target = "_blank"><li class="list-group-item">Find k-th smallest divisor of a number in C++</li></a>
    <a href="https://www.codespeedy.com/using-confusion-matrix-in-machine-learning-in-python/"target = "_blank"><li class="list-group-item">Using Confusion Matrix in Machine Learning in Python</li></a>
    <a href="https://www.codespeedy.com/machine-learning-customer-churn-analysis-prediction/"target = "_blank"><li class="list-group-item">Machine Learning | Customer Churn Analysis Prediction</li></a>
</ul>
</div>
<div class="col-sm-6" >
<h1 id="h1Project">Projects</h1>
<ul class="list-group">
         <li class="list-group-item"  data-toggle="collapse"><button type="button" class="btn btn-light" data-toggle="collapse" data-target="#demo3">Depoying Keras model in WebAPP using Tensorflow Js</button></li> 
         <ul id="demo3"  class="collapse">
         <a href="https://ashu131998.github.io/Webapp/Webapp/WebApp.html"target = "_blank"><li>WebApp</li></a> 
         <a href="https://github.com/ashu131998/Webapp"target = "_blank"><li>Codes of Tensorflow model and Website</dd></a>
         </ul>



        <li class="list-group-item"  data-toggle="collapse"><button type="button" class="btn btn-light" data-toggle="collapse" data-target="#demo1">Python | Understanding Style Transfer using CNNs</button></li> 
        <ul id="demo1"  class="collapse">
        <a href="https://www.codespeedy.com/python-understanding-style-transfer-using-cnns/"target = "_blank"><li>Article and Discription</dd></a> 
        <a href="https://github.com/ashu131998/Nueral-style-transfer/blob/master/NST_Complete.ipynb"target = "_blank"><li>Code</dd></a>
        </ul>
        <li class="list-group-item"  data-toggle="collapse"><button type="button" class="btn btn-light" data-toggle="collapse" data-target="#demo">AI Algorithms</button></li> 
        <ul id="demo"  class="collapse">
        <a href="https://github.com/ashu131998/Customer-churn-prediction-using-machine-learning"target = "_blank"><li>Customer Churn Analysis</dd></a> 
        <a href="https://www.codespeedy.com/machine-learning-model-to-predict-bitcoin-price-in-python/"target = "_blank"><li>Machine Learning Model to predict Bitcoin Price in Python</dd></a>
        <a href="https://github.com/ashu131998/Customer-churn-prediction-using-machine-learning/blob/master/DecisionTree.ipynb"target = "_blank"><li >Understanding Deep Belief Networks in Python</dd></a>
        </ul>
     
     <a href="https://github.com/ashu131998/Word-Cloud-using-python/blob/master/Final_Project_Word_cloud.ipynb"target = "_blank"><li class="list-group-item">Word Cloud in Python</li></a>
     
</ul>

标签： htmlcssbootstrap-4

解决方案

您缺少list-group第一个ul元素。这就是所有列宽都不相同的原因。

如果您使用与百分比相同class的事件width，则它将根据内部元素如何使用padding或width或heightcss 样式来更改其外部空间。如果它被修复，width它不会影响内部元素是否被占用。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h1 id="h1Codespeedy">Codespeedy Intern</h1>
      <ul class="list-group">
        <a href="https://www.codespeedy.com/implementing-an-lstm-cell-in-python/" target="_blank">
          <li class="list-group-item">Implementing an LSTM cell in Python</li>
        </a>
        <a href="https://www.codespeedy.com/understanding-deep-belief-networks-in-python/" target="_blank">
          <li class="list-group-item">Understanding Deep Belief Networks in Python</li>
        </a>
        <a href="https://www.codespeedy.com/merge-overlapping-intervals-in-cpp/" target="_blank">
          <li class="list-group-item">How to Merge Overlapping Intervals in C ++</li>
        </a>
        <a href="https://www.codespeedy.com/understanding-deep-belief-networks-in-python/" target="_blank">
          <li class="list-group-item">Python | Understanding Style Transfer using CNNs</li>
        </a>
        <a href="https://www.codespeedy.com/machine-learning-model-to-predict-bitcoin-price-in-python/" target="_blank">
          <li class="list-group-item">Machine Learning Model to predict Bitcoin Price in Python</li>
        </a>
        <a href="https://www.codespeedy.com/find-k-th-smallest-divisor-of-a-number-in-cpp/" target="_blank">
          <li class="list-group-item">Find k-th smallest divisor of a number in C++</li>
        </a>
        <a href="https://www.codespeedy.com/using-confusion-matrix-in-machine-learning-in-python/" target="_blank">
          <li class="list-group-item">Using Confusion Matrix in Machine Learning in Python</li>
        </a>
        <a href="https://www.codespeedy.com/machine-learning-customer-churn-analysis-prediction/" target="_blank">
          <li class="list-group-item">Machine Learning | Customer Churn Analysis Prediction</li>
        </a>
      </ul>
    </div>
    <div class="col-sm-6">
      <h1 id="h1Project">Projects</h1>
      <ul class="list-group">
        <li class="list-group-item" data-toggle="collapse"><button type="button" class="btn btn-light" data-toggle="collapse" data-target="#demo3">Depoying Keras model in WebAPP using Tensorflow Js</button></li>
        <ul id="demo3" class="collapse">
          <a href="https://ashu131998.github.io/Webapp/Webapp/WebApp.html" target="_blank">
            <li>WebApp</li>
          </a>
          <a href="https://github.com/ashu131998/Webapp" target="_blank">
            <li>Codes of Tensorflow model and Website</dd>
          </a>
        </ul>



        <li class="list-group-item" data-toggle="collapse"><button type="button" class="btn btn-light" data-toggle="collapse" data-target="#demo1">Python | Understanding Style Transfer using CNNs</button></li>
        <ul id="demo1" class="collapse">
          <a href="https://www.codespeedy.com/python-understanding-style-transfer-using-cnns/" target="_blank">
            <li>Article and Discription</dd>
          </a>
          <a href="https://github.com/ashu131998/Nueral-style-transfer/blob/master/NST_Complete.ipynb" target="_blank">
            <li>Code</dd>
          </a>
        </ul>
        <li class="list-group-item" data-toggle="collapse"><button type="button" class="btn btn-light" data-toggle="collapse" data-target="#demo">AI Algorithms</button></li>
        <ul id="demo" class="collapse">
          <a href="https://github.com/ashu131998/Customer-churn-prediction-using-machine-learning" target="_blank">
            <li>Customer Churn Analysis</dd>
          </a>
          <a href="https://www.codespeedy.com/machine-learning-model-to-predict-bitcoin-price-in-python/" target="_blank">
            <li>Machine Learning Model to predict Bitcoin Price in Python</dd>
          </a>
          <a href="https://github.com/ashu131998/Customer-churn-prediction-using-machine-learning/blob/master/DecisionTree.ipynb" target="_blank">
            <li>Understanding Deep Belief Networks in Python</dd>
          </a>
        </ul>

        <a href="https://github.com/ashu131998/Word-Cloud-using-python/blob/master/Final_Project_Word_cloud.ipynb" target="_blank">
          <li class="list-group-item">Word Cloud in Python</li>
        </a>

      </ul>

推荐阅读