如何在Twitter Bootstrap中创建动态宽度列

Question

如何使用Twitter Bootstrap创建类似于表的列表结构，其中一些列占用尽可能多的空间，以容纳该列的最宽元素，并且单个列占用剩余空间？

例如：

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

Id列占用足够的空间来容纳100001 id，这是最长的ID。

名称列占用的空间足以容纳名称Christine。

电子邮件列占用剩余空间。

Answer 1

使用旧表标记的表结构

开玩笑 - 或者我不是。

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

使用网格系统

在关于bootstrap grid system的文档中，我找不到任何自动宽度构建块。开箱即用的所有内容都有一定的宽度和固定数量的列：

   <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列表构建自己的版本。

在我的demo中，如果空间要缩小，则网格列会换行;如果空间太宽，则会拉伸列。

使用广告素材标记进行更新

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

  <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-3 display:table来设置类似布局的表格的文章。除非你为每一行使用三个div，否则它不能解决换行问题。

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

Bootstrap响应式设计

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

你能详细说明为什么你不能使用桌子吗？

Answer 2

正如其他人所说，你应该使用有意义的常规表。 另外，CSS3 display：table可以是一个很好的解决方案。

根据使用情况，您可以考虑采用不同的解决方案：
https://github.com/donquixote/bootstrap-autocolumns/blob/master/bootstrap-autocolumns.css
这是一个CSS添加＆＃34; col-sm-auto＆＃34;除了＆＃34; col-sm-1＆＃34;，＆＃34; col-sm-5＆＃34;等

（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 - * - 自动向右浮动到右边。
• .col-middle有display：table，可防止它在其他元素周围浮动。
• 使用＆＃34; xs＆＃34;，＆＃34; sm＆＃34;，＆＃34; md＆＃34;，＆＃34; lg＆＃34;以特定的屏幕宽度为目标。

限制

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

如果中间列中包含足够的内容，则中间列仅采用完整的可用宽度。

Answer 3

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

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

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

注释：

• ＆＃34;！important＆＃34;条款可能会被删除（我不确定）
• 在我的项目中，无论如何都知道文本很小。

Answer 4

根据bootstrap Documentation 您可以将table-responsive css类应用于表元素并使其响应。我观察到它实际上是滚动的。