32

How do you use Twitter Bootstrap to create a table-like list structure, where some columns take as much space, as required to accommodate the widest element of that column, and a single column takes the remaining space?

For example: 

Id    |Name     |Email address                
100001|Joe      |MamiePVillalobos@teleworm.us
100   |Christine|ChristineJWilliams@dayrep.com
1001  |John     |JohnLMiley@dayrep.com

the Id column takes just enough space to accommodate the 100001 id, which is the longest id.

The Name column takes just enough space to accommodate the name Christine.

The Email column takes the remaining space.

4

4 回答 4

27

使用旧表格标签的表格结构

开个玩笑——或者我不是。

<table class="table">
  <tr><th>Id</th>     <th>Name</th>      <th>Email address</th></tr>
  <tr><td>100001</td> <td>Joe</td>       <td>MamiePVillalobos@teleworm.us</td></tr>
  <tr><td>100</td>    <td>Christine</td> <td>ChristineJWilliams@dayrep.com</td></tr>
  <tr><td>1001</td>   <td>John</td>      <td>JohnLMiley@dayrep.com</td></tr>
</table>

使用网格系统

在有关引导网格系统的文档中，我找不到任何自动宽度构建块。所有开箱即用的东西都有一定的宽度和固定的列数：

   <div class="row">
      <div class="span2">ID</div>
      <div class="span2">Name</div>
      <div class="span8">E-Mail</div>
    </div>
    <div class="row">
      <div class="span2">100001</div>
      <div class="span2">Joe</div>
      <div class="span8">MamiePVillalobos@teleworm.us</div>
    </div>
        <div class="row">
      <div class="span2">100</div>
      <div class="span2">Christine</div>
      <div class="span8">ChristineJWilliams@dayrep.com</div>
    </div>

因此，我假设您必须为具有自动大小的 3 列表构建自己的版本。

在我的演示中，如果空间变窄，或者如果空间太宽，列会被拉伸，则网格列会换行。

使用创意标记进行更新

我用自定义类更新了我的演示。创意标记接近您正在寻找的内容

  <div class="row">
      <div class="spanFl">100000001 <br />
        100
      </div>
      <div class="spanFl">Joe <br/>
          Christine
      </div>
      <div class="spanFl">MamiePVillalobos@teleworm.us <br />
        ChristineJWilliams@dayrep.com
      </div>
  </div>

使用css-3显示表格

在tutsplus 上，我找到了一篇使用 css-3display:table设置表格布局的文章。除非您为每一行使用三个 div，否则它不能解决行换行问题。

#content {  
    display: table;  
}  
#mainContent {  
    display: table-cell;  
    width: 620px;  
    padding-right: 22px;  
}  
aside {  
    display: table-cell;  
    width: 300px;  
}

引导响应式设计

据我了解引导文档没有内置的灵魂，用于具有自动和剩余宽度的 3 列布局。引用引导程序上的响应式设计页面：“负责任地使用媒体查询，并且仅作为移动受众的开始。对于较大的项目，请考虑专用代码库而不是媒体查询层。”

您能否详细说明为什么不能使用桌子？

于 2012-10-21T20:08:59.187 回答
10

正如其他人所说，您应该在有意义的地方使用常规表格。此外，CSS3 display:table 也是一个很好的解决方案。

根据用例，您可以考虑使用不同的解决方案：
https
://github.com/donquixote/bootstrap-autocolumns/blob/master/bootstrap-autocolumns.css 这是一段添加“col-sm”的 CSS -auto” 除了“col-sm-1”、“col-sm-5”等。

（ATM，我建议将其复制到自定义 css 文件并根据您的需要进行调整。）

例子

<div class="row">
  <div class="col-xs-auto">Left</div>
  <div class="col-xs-auto-right">Right</div>
  <div class="col-middle">Middle</div>
</div>

这是一个小提琴：http: //jsfiddle.net/9wzqz/

主意

  • .col-*-auto 向左浮动，具有典型的填充，但没有任何明确的宽度设置。
  • .col-*-auto-right 改为向右浮动。
  • .col-middle 有 display:table，可以防止它在其他元素周围浮动。
  • 使用“xs”、“sm”、“md”、“lg”来定位特定的屏幕宽度。

限制

如果您用长文本填充左/右列，它们将扩展为全宽。最好将它们用于图像等固定宽度的东西。

中间列只有在它有足够的内容时才会占用完整的可用宽度。

于 2014-07-14T17:53:11.607 回答
4

如果您不需要限制列大小，则可以禁用宽度。

<span class="col-xs-1" style="width: inherit !important; ">unknown ...</span>

我需要其他列的属性（填充、高度等）的引导定义，所以我添加了一个 col 定义，但是一个小单元（col-xs-1）。

笔记：

  • “！important”子句可能会被删除（我不确定）
  • 在我的项目中，已知文本无论如何都很小。
于 2015-04-15T11:51:34.153 回答
-1

好吧，根据引导文档 ，您可以将table-responsivecss 类应用于表格元素并使其具有响应性。我观察到的是它实际上可以滚动。

于 2015-07-30T00:24:38.790 回答