如何在bootstrap中添加保证金？

Question

我有HTML：

<div class="col-xs-16">
  <div class="item col-xs-8"></div>
  <div class="item col-xs-8"></div>
  <div class="item col-xs-8"></div>
</div>

col-xs-8的阻止版具有CSS display:inline-block。如何为每个margin添加col-xs-8？我试过，但元素从内联移到下一行。

Answer 1

两件事：

1）Bootstrap的网格系统是一个12列的网格。这意味着每行最多应加12（而不是示例中的16或24）。请看这里的一些例子：

• http://getbootstrap.com/examples/grid/
• http://getbootstrap.com/css/#grid

2）网格系统意味着元素的大小为宽度百分比。为网格添加保证金确实会让事情变得糟糕。例如：

由于网格基于十二列，因此两个.col-md-6将分别是“中型设备”上其父容器宽度的50％（Bootstrap的浏览器宽度术语＆gt; = 992px）。总之，它构成了容器宽度的100％。添加边距会增加更多宽度，使两个元素的总宽度及其边距大于100％，将元素推入单独的线条。

要在网格中的元素周围添加空格，请考虑填充（使用box-sizing: border-box;，允许将填充宽度计算为元素的宽度）。这将允许Bootstrap的网格系统继续按预期工作，同时为您的内容创建空间。

Answer 2

如果您只想要小空间黑白元素，您可以使用填充因为边距会在元素周围添加空格所以如果您的col-xs-8有50% width那么行，那么你有50% xs-8 block + margin space + 50% xs-8 block所以你的元素将移动到下一行。