Question

我想在这些列之间添加空格，我该如何使用bootstrap。

<div class="container">
    <h1 class="my_h">title</h1>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <div>Widget 1</div>
                </div>
                <div class="col-md-4">
                    <div>Widget 2</div>
                </div>
                <div class="col-md-4">
                    <div>Widget 3</div>
                </div>
            </div>
        </div>
</div>

Answer 1

您可以使用col-md-offset-*：

<div class="container">
    <h1 class="my_h">title</h1>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4 col-md-offset-2">
                    <div>Widget 1</div>
                </div>
                <div class="col-md-4">
                    <div>Widget 2</div>
                </div>
                <div class="col-md-4">
                    <div>Widget 3</div>
                </div>
            </div>
        </div>
</div>

您可以阅读有关此here的更多信息。

Answer 2

Bootstrap始终在列上使用15px填充来分隔列的内容。

因此列内容之间存在标准的30px空间

Answer 3

尝试使用css和offset

 .widget-box {
      padding: 20px 5px;
    }

<div class="container">
  <h1 class="my_h">title</h1>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        <div class="widget-box">Widget 1</div>
      </div>
      <div class="col-md-4">
        <div class="widget-box">Widget 2</div>
      </div>
      <div class="col-md-4">
        <div class="widget-box">Widget 3</div>
      </div>
    </div>
  </div>
</div>

OR

设置偏移量

<div class="container">
  <h1 class="my_h">title</h1>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-md-offset-1">
        <div class="widget-box">Widget 1</div>
      </div>
      <div class="col-md-3 col-md-offset-1">
        <div class="widget-box">Widget 2</div>
      </div>
      <div class="col-md-3">
        <div class="widget-box">Widget 3</div>
      </div>
    </div>
  </div>
</div>

Answer 4

建议的长期个性化修补解决方案

如果您希望维护12列网格系统，而不是使用空列来创建您正在寻找的间距，那么最好的解决方案就是为Bootstrap自定义您自己的设置。

最具体地说，这个链接：http://getbootstrap.com/customize/#grid-system

快速而肮脏的修复

另一方面，如果您想使用空列，offset类就在这里。请记住，您可能很难正确对齐3列：

<div class="container">
    <h1 class="my_h">title</h1>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3 col-md-offset-2">
                    <div>Widget 1</div>
                </div>
                <div class="col-md-3 col-md-offset-1">
                    <div>Widget 2</div>
                </div>
                <div class="col-md-3">
                    <div>Widget 3</div>
                </div>
            </div>
        </div>
</div>

如何使用Bootstrap在列之间添加空格

4 个答案: