Question

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

对于每个元素，我正在使用：

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

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

Answer 1

由于您已经在使用bootstrap，只需在该div中插入div.row-fluid，该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>

Answer 2

Flexboxes（http://dev.w3.org/csswg/css-flexbox/）完全符合您的要求，如果您可以使用当前的浏览器支持状态（http://caniuse.com/flexbox）并且需要使用供应商前缀。在你的情况下，像这样：

#my-div {
    display: -webkit-flex;        
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: flex-between; /* flush against edges */
    -webkit-justify-content: flex-around;  /* space at left/right */
}

.elt {
    -webkit-flex: none; /* do not grow and shrink items */
    height: 75px;
    width: 75px;
    border-radius: 50%;
    margin-right: 20px;
}

这些本质上是敏感的。当然比一些片状的jQuery插件更好。

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

2 个答案: