Question

我有一个水平div的列表，我不能让它们按照我的要求行事。我想要实现的是

对于md，lg，sm - 列出一个矩形div，其中包含任意大小图像的小“缩略图”类图像，并继续使用用户的名称 - 如md视图中的示例所示。
对于xs我希望每个条目都在另一个下面，名称在图像下方 - 这应该是屏幕大小。

我无法用图像来举例说明，因为我已经使用了过多的内联css。

http://www.bootply.com/T0AAHhHU0h

Answer 1

除非我误解了你的问题，否则看起来你已经非常接近你正在寻找的东西......只需将col-md-3改为col-sm-3，切换到垂直布局就会发生在xs断点而不是sm断点，如下所示：http://www.bootply.com/Ba1aGC1Lds。

<div class="col-sm-3" style="margin-bottom:20px">
  <div class="col-md-12" style="border:1px solid #C0C0C0;background-color:white">
    <div class="col-md-4" style="background-color:black;height:60px">
  </div> 
  <div class="col-md-8">
   <strong>John Smith</strong>
  </div>
</div>

Bootstrap 3 div水平列表

1 个答案: