Question

这里我有3列，总共100％的页面：

<div class = 'col-xs-4'>*</div>
<div class = 'col-xs-4'>*</div>
<div class = 'col-xs-4'>*</div>

但是，他们之间没有差距。我想要他们之间的差距。我应该如何使用bootstrap执行此操作？我已尝试在列中嵌套列，但这不起作用。 col-12内的col-4实际上加起来为col-12：

<div class = 'col-xs-4'>
    <div class = 'col-xs-12'></div>
</div>

我记得在960网格中你可以嵌套网格。

Answer 1

执行此操作的一种方法是使用另一个div

包装列内容

HTML

<div class="row"> 
  <div class="col-xs-4"> 
   <div class="inner">Content</div>
  </div> 
  <div class="col-xs-4"> 
   <div class="inner">Content</div>
  </div> 
  <div class="col-xs-4"> 
   <div class="inner">Content</div>
  </div> 
</div>

CSS

.inner {
   background-color: #eee;
}

列的默认填充将在列之间创建边距。

Answer 2

这是你需要的

<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <!-- 33% -->
            <div class="row">
                <div class="col-xs-12">
                    <!-- 33% -->
                </div>
                <div class="col-xs-4">
                    <!-- 11% -->
                </div>
                <div class="col-xs-4">
                    <!-- 11% -->
                </div>
                <div class="col-xs-4">
                    <!-- 11% -->
                </div>
            </div>
        </div>
    </div>
</div>

在Bootstrap中嵌套cols

2 个答案: