Question

我有一个bootstrap，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>

Answer 1

删除padding-left＆amp;来自新{c}文件中padding-right个类的col-*-*，为他们提供了一个额外的类（在我的情况下为div-holder），如：

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>

如何删除列之间的空格

1 个答案: