Bootstrap 3 向网格系统添加排水沟答案

【问题标题】：Bootstrap 3 adding gutters to the grid systemBootstrap 3 向网格系统添加排水沟
【发布时间】：2019-03-08 21:47:57
【问题描述】：

我显然在这里遗漏了一些非常明显的东西，但我希望引导列之间有一个 10 像素的排水沟。来自默认具有排水沟的 ui-kit，要关闭它们，您只需添加类 uk-grid-collapse。

打开排水沟的引导程序等效项是什么？

http://codepen.io/anon/pen/vKBjBa

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12 col1">
        <div class="div-content">col 1</div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col2">
        <div class="div-content">col 2</div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col3">
        <div class="div-content">col 3</div>
    </div>
</div>

【问题讨论】：

解决了您的问题？

标签： css twitter-bootstrap

【解决方案1】：

只需将颜色定义为内部 div。在这里，我从父母那里删除了课程并将课程传递给子 div 的

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-12">
    <div class="div-content col1">col 1</div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6">
    <div class="div-content col2">col 2</div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6">
    <div class="div-content col3">col 3</div>
  </div>
</div>

因为引导程序在col- 类中有一个默认的装订线空间，所以使用它们并将background-color 定义为内部 div。

默认的装订线空间是15px，左右两边，所以你会在div之间看到30px的默认空间。如果您想将该空间更改为 10px，只需编写您自己的 css 和所需空间并覆盖它。

【讨论】：

【解决方案2】：

您可以使用引导类 container-fluid 来完成此操作，请使用以下内容更新您的 HTML：-

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="container-fluid col1">
           <div class="div-content">col 1</div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6">
        <div class="container-fluid col2">
           <div class="div-content">col 2</div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6">
        <div class="container-fluid col3">
           <div class="div-content">col 3</div>
        </div>
    </div>
</div>

也许对你有帮助。

【讨论】：

【解决方案3】：

如果您想要 10 像素的自定义装订线宽度，您可以通过使用 http://getbootstrap.com/customize/ 使用您的值自定义引导程序来实现，或者您可以创建自己的自定义类来覆盖它

【讨论】：

是的，我理解这一点，但如果您使用 CDN 版本，或者只是使用 codepen 之类的东西“玩”，因为您没有在框架内编辑默认值的选项，这并不好
它不是 CDN，它将使用您的自定义值进行编译和下载，或者您可以使用引导程序提供的 SASS 或 LESS 文件来更改框架内的值，或者您可以编写函数或 mixins

【解决方案4】：

如果你想彻底去除装订线，Bootstrap 3 在 v3.4.0 中引入了row-no-gutters： https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters

【讨论】：