如何在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.

" 名称"列占用的空间足以容纳名称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网格系统的文档中,我找不到任何自动宽度构建块.开箱即用的所有内容都有一定的宽度和固定数量的列:

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

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

Bootstrap响应式设计

据我所知,自举文档没有内置的灵魂,可用于具有自动和剩余宽度的3列布局.在引导程序中引用响应式设计页面:"负责任地使用媒体查询,仅作为移动受众的开端.对于大型项目,请考虑专用代码库而不是媒体查询层."

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

Answer 2

正如其他人所说,你应该使用常规表来理解它们.另外,CSS3显示:表可以是一个很好的解决方案.

根据用例,您可以考虑使用不同的解决方案:
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 - * - 自动向右浮动到右边.
• .col-middle有display:table,可防止它在其他元素周围浮动.
• 使用"xs","sm","md","lg"来定位特定的屏幕宽度.

限制

如果用长文本填充,左/右列将扩展为全宽.更好地将它们用于像图像这样的固定宽度的东西.

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