均匀地将div中的元素隔开以进行响应式设计

Question

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

对于每个元素,我使用:

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

JS小提琴:http://jsfiddle.net/adnanymous/9yYZJ/

Answer 1

由于您已经在使用bootstrap,只需div.row-fluid在div中插入一个应该包含四个项目的div.将这四个项目中的每一个包裹起来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>