css - 如何删除列之间的空间

标签 css twitter-bootstrap

<分区>

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

最佳答案

从新的 css 文件中的 col-*-* 类中删除 padding-leftpadding-right,方法是给它们一个额外的类(在我的例子中是 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>

关于css - 如何删除列之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41124912/

上一篇:html - 为什么三行菜单导航图标不显示?

下一篇:html - 表与位置 : absolute in IE (not Chrome) 不对齐

相关文章:

html - 如何在不影响导航栏高度的情况下扩展 Bootstrap 导航栏品牌的背景颜色

ios - 选择元素导致在 iOS 设备上滚动到页面顶部

css - Bootstrap 下拉位置固定,容器边界半径在 IE 中消失在边界之外

jquery - 如何在 Bootstrap 数据表插件上对日期格式 d/m/y 进行排序?

javascript - 1000hz Bootstrap 验证器数据切换 ="validator"不工作

css - 使用 Bootstrap 在另一列内居中 4 列

javascript - 是否可以制作一条波浪线?

html - 网格模板区域不适用于长文本

html - 换行时每行保持相同数量的 flex child

javascript - Jquery递归更新元素类