具有信息行的复杂布局

Question

我使用bootstrap - 我需要布局：

需要做出回应。

这是否算作表格数据＆＃39;？应该使用一张桌子吗？我们怎样才能将它保持在所有响应宽度的一条线上并正确对齐？

我尝试过使用自适应列，但需要在每个宽度上进行大量的手动调整，而且看起来并不优雅。

我在这里错过了一个明显的解决方案，还是这本来就很难？

Answer 1

在这种情况下，对于响应式布局，使用引导程序list-group而不是表格会更好。每个列表组项都应包含row个columns所需的大小。

我建议不要将智能手机大小的设备保留在一条线上，因为有很多内容可供选择。在此代码中，列堆叠在xs设备上。

这是一个示例bootply：http://www.bootply.com/nVV0PvhNFC

<ul class="list-group">
    <li class="list-group-item">
      <div class="row">
        <div class="col-sm-1">
          <p>Image</p>
        </div>
        <div class="col-sm-7">
          <p>Fund name</p>
          <p>Sector</p>
        </div>
        <div class="col-sm-2">
          <p>Favourite</p>
        </div>
        <div class="col-sm-2">
          <p>Read More</p>
        </div>
      </div>
    </li>
</ul>

Answer 2

通常，获得响应的最简单方法是在宽度属性上使用百分比值; 此外，css media-queries应该用于定位某些显示或宽度 （使用媒体查询，您可以在特定情况下创建自定义样式）;

基本上就是bootstrap grid的原则（我之所以提到它是因为我看到了你如何标记你的问题）;

如果我是你，我会使用bootstrap container和rows，然后自定义行内容的样式（如果＆＃39，你也可以使用bootstrap＆＃39; s列;方便....）。