Twitter bootstrap 具有多行信息的复杂布局

我正在使用引导-我需要布局：

它需要作出反应

这算不算“表格数据”？应该用桌子吗？我们如何使其在所有响应宽度上保持在一条线上并正确对齐

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

---

我是否缺少一个明显的解决方案，或者这本身就很难做到？

通常，获得响应的最简单方法是在宽度属性上使用百分比值； 此外，css应用于针对特定的显示或宽度 （使用媒体查询，您可以根据特定情况创建自定义样式）

基本上，这正是问题的原则（我之所以提到它，是因为我知道这就是你们如何标记你们的问题）

---

如果我是你，我会使用引导

容器

和

行

，然后自定义行内内容的样式（如果方便的话，也可以使用引导的列）。

在这种情况下，对于响应性布局，最好使用引导

列表组

。每个列表组项应包含一个

行

，其中

列

的大小应符合要求

不过，我建议不要让智能手机大小的设备都在一条线上，因为有很多内容需要安装。在此代码中，列堆叠在xs设备上

下面是一个引导示例：

形象

基金名称

扇区

宠儿

阅读更多

如何准确定制样式？谢谢-为什么列表组不感兴趣？这里的问题与我尝试的类似，它需要大量的手动调整，以使所有东西都适合3种非移动尺寸的一条线。大量的工作。我想这是没有办法的？为了澄清，如果我不这样做，调整的东西在更高的分辨率下排列不好-有随机的间隙等。此外-这个列表组需要占据主页的10列-两边的偏移量为1。我应该将其嵌套在常规列中还是有更简单的方法？

<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>