Bootstrap 为什么这里它不是在一个单一的行对齐，因为我给他们同样6列

6mw9ycah 于 2023-06-20 发布在 Bootstrap

关注(0)|答案(1)|浏览(97)

我使用的Bootstrap网格列导致内容重叠，而不是正确的水平对齐。下面是我使用的HTML代码：

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
      <script src="https://kit.fontawesome.com/55fbb5a005.js" crossorigin="anonymous"></script>
   </head>
   <body>
      <div class="container-fluid ">
         <div class="row">
            <div class="col-12 col-md-6 p-3">
               <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-trending-blogs-1-img.png" class="keyboard">
               <div class="shadow p-3 box-1">
                  <h5 class="sub-head">Fountain Pens</h5>
                  <h2 class="head">Guide to Fountain Pen Nibs</h2>
                  <p class="para">If you're having trouble with a fountain pen, whether it is scratchy, too dry, or too wet...</p>
                  <p><span class="change">Read More <i class="fa-sharp fa-regular fa-arrow-right"></i></span></p>
               </div>
            </div>
            <div class="col-12 col-md-6 p-3">
               <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-trending-blogs-2-img.png" class="keyboard">
               <div class="shadow p-3 box-1">
                  <h5 class="sub-head">Productivity</h5>
                  <h2 class="head">How to Craft a Better Todo List</h2>
                  <p class="para">A well-crafted todo list acts as a guiding light for your day. It helps you overcome...</p>
                  <p><span class="change">Read More <i class="fa-sharp fa-regular fa-arrow-right"></i></span></p>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

请注意，我在网格中的每一行都使用了6列，但它并没有水平对齐。

twitter-bootstrap

来源：https://stackoverflow.com/questions/76487756/why-here-it-is-not-aligned-in-a-single-row-as-i-have-given-them-equally-6-column