两列（col-md-6）中间没有间隙？答案

【问题标题】：Two Columns (col-md-6) without gap in the middle?两列（col-md-6）中间没有间隙？
【发布时间】：2014-11-17 14:44:56
【问题描述】：

在Bootstrap中，我使用col-md-6带来两列但是如何去除中间的间隙并填充空格？

例如在 Photoshop 中：

HTML 代码：

        <div class="row">
            <div  class="col-md-6">
               <div class="blue-section">
                   1
               </div>
            </div>
            <div  class="col-md-6">
               <div class="red-section">
                  2
               </div>
            </div>
        </div>

注意：我只想申请这个板块，不是默认所有的。

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是一个很老的问题，但为了对现在来的人有所帮助，Bootstrap 现在有一个 g (gutter) 类，它可以删除列边缘之间的空间。

<div class="row g-0"> // the g-0 will remove all spaces. Ranges from 0-5.
    <div class="col-6">
       // content
    </div>
    <div class="col-6">
       // content        
    </div>
</div>

对于 Bootstrap 5，如果需要，您也可以参考此链接：https://getbootstrap.com/docs/5.0/layout/gutters/

【讨论】：

【解决方案2】：

使用带有负边距的.row 来移除列之间的装订线（填充）..

<div class="row">
  <div class="col-md-6">
    <div class="row blue-section">
      1
    </div>
  </div>
  <div class="col-md-6">
    <div class="row red-section">
      2
    </div>
  </div>
</div>

演示：http://www.bootply.com/TytFvxummt

【讨论】：

我会为这个答案打勾！！ +1

【解决方案3】：

假设您只想让背景接触，那么您不需要做任何事情。 Bootstrap 中的列装订线（在您的 photoshop 文件中由蓝线表示）是由填充生成的。因此，您可以简单地执行以下操作来实现您的 Photoshop 文件中的内容：

HTML：

<div class="container">
  <div class="row">
    <div  class="col-md-6 blue-section">              
      1      
    </div>
    <div  class="col-md-6 red-section">              
      2            
    </div>
  </div>
</div>

CSS：

.blue-section{background:blue;}
.red-section{background:red;}

这将导致您的内容仍然有填充。

【讨论】：

【解决方案4】：

我认为你必须采取这样的结构

<div class="container">
  <div class="row">
    <div  class="col-md-6"> 
        <div class="row">1</div>
    </div>
    <div  class="col-md-6">              
      <div class="row">2</div>
    </div>
  </div>
</div>

【讨论】：

【解决方案5】：

使用这个：

 <div class="row">
     <div class="col-md-6">
         <div class="blue-section">
             1
         </div>
     </div>
     <div class="col-md-6">
         <div class="red-section">
             2
         </div>
     </div>
 </div>

将实现这一点，您是否在 div 上添加了任何填充或边距？默认情况下，引导行/列上没有。所以它必须与 .red-section & .blue-section 上的 css 一起使用？

我为列添加了背景颜色，以便您看到 http://jsfiddle.net/bnyrL54u/

希望这会有所帮助。

【讨论】：

只是一个更正点：默认情况下，Bootstrap 中的所有 col 类都有 15px 的左右填充。默认情况下，所有行的左右边距为 -15px，所有容器（容器和容器流体）的左右边距为 15px。这就是网格的工作原理。我在这里的回答可能会帮助您更好地理解这一点：stackoverflow.com/questions/23899715/…