为什么'col-md-6'在中间给出太多的空白？答案

【问题标题】：why 'col-md-6' giving too much gaps in middle?为什么'col-md-6'在中间给出太多的空白？
【发布时间】：2021-12-25 21:47:44
【问题描述】：

我正在尝试将 4 个 div 与引导类并排显示，但不幸的是，我在中间（每个 div 的右侧）有太多空间，而且也没有与中心对齐。我希望它们居中对齐，中间的空间很小。请帮忙。

<html>
   <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </head>
   <style>
     .student-blocks {
       padding: 1rem;
       box-shadow: 0 0 10px gray;
       max-width: 9rem;
       text-align: center;
     }
   </style>
   <body>
      <section>
         <div class="container">
            <div class="row">
               <div class="col-md-6">
                  <div class="row">
                     <div class="col-6">
                        <div class="student-blocks">
                           <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                           <p>Students</p>
                        </div>
                     </div>
                     <div class="col-6">
                        <div class="student-blocks">
                           <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                           <p>Students</p>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-md-6">
                  <div class="row">
                     <div class="col-6">
                        <div class="student-blocks">
                           <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                           <p>Students</p>
                        </div>
                     </div>
                     <div class="col-6">
                        <div class="student-blocks">
                           <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                           <p>Students</p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
   </body>
</html>

【问题讨论】：

您在此缺少开头的html 和body 标签，您能解决这些问题吗？然后，如果您希望 1000+ 和学生在同一行，请将 <p> 更改为 <span>。段落是块元素。请参阅：jsfiddle.net/deathstalkersid/fL6v2y1b/2，然后再详细说明问题。
请立即查看。
我可以将它们排列成一排，但差距即将到来。这就是我的问题。请解决。
您的示例代码看起来正确，运行代码 sn-p 并排显示 4 个项目（每行 2 个）。也许添加您看到的屏幕截图？
这与你的屏幕尺寸有关，请查看getbootstrap.com/docs/4.1/layout/grid

标签： html css twitter-bootstrap

【解决方案1】：

如果您尝试将 4 个 div 并排放置在一行中，请尝试以下模板。

<body>
  <section>
    <div class="container">
      <div class="row">

            <div class="col">
              <div class="student-blocks">
                <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                <p>Students</p>
              </div>
            </div>
            <div class="col">
              <div class="student-blocks">
                <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                <p>Students</p>
              </div>
            </div>

            <div class="col">
              <div class="student-blocks">
                <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                <p>Students</p>
              </div>
            </div>
            <div class="col">
              <div class="student-blocks">
                <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                <p>Students</p>
              </div>
            </div>
      </div>
    </div>

  </section>
</body>

【讨论】：

输出没有变化。

【解决方案2】：

所以我对您的 HTML 进行了一些重新设计，以获得您想要的结果。为了让它们位于同一行，我将它们更改为 .col-3 以跨越默认的每行 12 列。 12/3 = 每行 4 个。您可以通过将所需的 col 大小放回 col-6 （每行两个等）简单地将其放到新行中。

我在您的容器中添加了flex display 和justify-content: center，以便所有内容都居中。

.student-blocks {
  padding: 1rem;
  box-shadow: 0 0 10px gray;
  max-width: 9rem;
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
}

/* change padding to change spacing */

div.col-3 {
  flex: 0 0 auto;
  width: 25%;
  padding: 10px;
}

<html>
   <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </head>
   <body>
        <section>
         <div class="container">
            <div class="row">
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
            </div>
        </div>
        </section>
   </body>
</html>

您只需更改 CSS 选择器 div.col-6 上的 padding 即可将间距更改为您想要的。

要消除间距，只需将padding: 0; 设为：

.student-blocks {
  padding: 1rem;
  box-shadow: 0 0 10px gray;
  max-width: 9rem;
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
}

div.col-3 {
  flex: 0 0 auto;
  width: 25%;
  padding: 0px;
}

<html>
   <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </head>
   <body>
        <section>
         <div class="container">
            <div class="row">
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
            </div>
        </div>
        </section>
   </body>
</html>

【讨论】：

感谢您的回答，但我希望这完全由引导类完成。我已经在 flexbox 上工作并得到了想要的结果。
@Gopichand 好的，然后删除 container 和 div.col-3 样式，但仍然使用我的 HTML。然后只需设置你的max-width: 100%; --> 你会得到这些差距，因为你在一个大于你的 max-width 样式的容器中设置了一个 max-width 属性。您可以根据需要调整max-width: 100%;，这将改变您的间距。从 100% 开始，没有间隙，然后下降到 90%，有轻微的间隙，等等……无论哪种方式，你都必须重新编写 HTML，你有一行很好，但你有另一行在里面父行类甚至不作为行运行
@Gopichand 如果您不太了解 Bootstrap，我可以在您的 HTML 版本中添加注释并解释所有内容的含义。
很高兴。如果可能的话，请给我一些关于必须使用引导类的说明。