Question

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

例如在photoshop中：

enter image description here

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>

注意：我只想申请此部分，而不是默认情况下的所有内容。

Answer 1

假设您只想触摸背景，那么您就不需要做任何事情。 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;}

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

Answer 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

Answer 3

这是一个很老的问题，但只是为了对现在来的人有所帮助，Bootstrap 现在有一个 g（装订线）类，用于删除列边缘之间的空格。

<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/

Answer 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>

Answer 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上添加了任何填充或边距吗？默认情况下，bootstrap rows / cols上没有。所以它必须与.red-section＆amp;上的css一起使用。的.blue截面？

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

希望这有帮助。

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

5 个答案: