如何删除列之间的空间[重复]答案

【问题标题】：How to remove space between columns [duplicate]如何删除列之间的空间[重复]
【发布时间】：2016-12-13 23:47:33
【问题描述】：

我有一个引导程序，3 列网页。目前我想删除的每列之间有少量空间。如何在不编辑 bootstrap.css 文件的情况下做到这一点？谢谢。

<div class="container">
        <div class="row">
            <div class="col-md-2">
                <div class="customDiv">
                    <div id="collapsible-panels">
                        <p><a href="#">Question One goes here?</a></p>
                        <div><p><a href="page2.html">Page 2</a></p></div>
                        <p><a href="#">Question Two goes here?</a></p>
                        <div><p>Answer to Question Two goes here.</p></div>
                        <p><a href="#">Question Three goes here?</a></p>
                        <div><p>Answer to Question Three goes here.</p></div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="customDiv">Main Content Area</div>
            </div>
            <div class="col-md-2">
                <div class="customDiv">Right Side Bar</div>
            </div>
        </div>
    </div>

【问题讨论】：

您需要在所有要执行此操作的列上覆盖 Bootstrap 的列填充。如果像 div.container > div.row > div { padding-left:0; padding-right:0; } 这样的规则在 Bootstrap 的 CSS 之后加载，它可能会起作用。

标签： css twitter-bootstrap

【解决方案1】：

通过为新 css 文件中的 col-*-* 类提供额外的类（在我的情况下为 div-holder），从 col-*-* 类中删除 padding-left 和 padding-right，例如：

CSS：

.div-holder {
  padding-left: 0;
  padding-right: 0;
}

HTML：

<div class="container">
  <div class="row">
    <div class="col-md-2 div-holder">
      <div class="customDiv">
        <div id="collapsible-panels">
          <p><a href="#">Question One goes here?</a></p>
          <div><p><a href="page2.html">Page 2</a></p></div>
          <p><a href="#">Question Two goes here?</a></p>
          <div><p>Answer to Question Two goes here.</p></div>
          <p><a href="#">Question Three goes here?</a></p>
          <div><p>Answer to Question Three goes here.</p></div>
        </div>
      </div>
    </div>
    <div class="col-md-8 div-holder">
      <div class="customDiv">Main Content Area</div>
    </div>
    <div class="col-md-2 div-holder">
      <div class="customDiv">Right Side Bar</div>
    </div>
  </div>
</div>

【讨论】：