css - 中间没有间隙的两列 (col-md-6)？

Question

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

注意:我只想申请这部分，默认不申请所有。

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;}

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