Ширина столбца не равна

Question

Моя bootstrap ширина столбца не равна, несмотря на то, что они равны. Ширина столбца не равна. Я установил их с помощью 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>  

Answer 1

Вам не хватает list-group первого ul элемента. Это причина, по которой ширина всех столбцов не одинакова.

Событие, если вы используете тот же class для width как в процентах, поэтому он изменит свое внешнее пространство в соответствии с внутренним элементом, как он занят, используя padding или стиль width или height css. если он был исправлен 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>

Answer 2

Ничего другого, вы просто забыли присвоить класс list-group первому ul.