twitter-bootstrap - 为响应式设计均匀分布 div 中的元素

Question

我在一个 div 中有四个元素，并希望将它们均匀地分布在可用空间中。在这种情况下，什么技术被认为是响应式设计的最佳实践？

对于每个元素，我使用的是:

height: 75px;
width: 75px;
border-radius: 50%;
margin-right: 20px;

JS fiddle :http://jsfiddle.net/adnanymous/9yYZJ/

Answer 1

由于您已经在使用 Bootstrap ，只需在应该包含四个项目的 div 中插入一个 div.row-fluid。将这四个项目中的每一个都包装在 div.span3 中。这将自动缩放间距，直到您在 767px 宽( Bootstrap 的手机大小)之前下降，此时所有内容都将垂直堆叠。这样可以避免添加额外的库，即使没有启用 javascript，也可以满足需求。

<div class="row-fluid">
  <div class="span3">Thing1</div>
  <div class="span3">Thing2</div>
  <div class="span3">Thing3</div>
  <div class="span3">Thing4</div>
</div>