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

【问题标题】：How to create a dynamic width column in Twitter Bootstrap如何在 Twitter Bootstrap 中创建动态宽度列
【发布时间】：2012-10-11 12:50:18
【问题描述】：

你如何使用 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。

姓名列只占用足够的空间来容纳克里斯汀这个名字。

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

【问题讨论】：

旨在显示此类数据的表格。你为什么不使用一个？如果你不这样做，你真的要求行是行还是只是为了外观（例如，制作 3 列 div，向左浮动）？
这是一个非常简单的例子。我正在寻找的是像 Bootstrap 的脚手架系统这样的布局机制，只是我需要一些列根据内容的宽度可变。我考虑了您建议的 float left 替代方案，但这意味着不使用 Boostrap。
Elad 据我了解文档没有可变长度。在这个问题stackoverflow.com/questions/9780333 和这个小提琴jsfiddle.net/eterpstra/rdvaG/12 中是响应式设计的演示。但它将列包装到下一行。据我了解您的要求，您想说 col1：width：auto，col2：width auto 和 col2：width 剩余。请参阅下面的更新
如果 Bootstrap 不这样做，为什么要强制它呢？网格并不意味着这样做。如果您真的不想使用该表，您仍然可以烹制类似 that jsfiddle 的东西 - 但 <table> 是 HTML 为您解决问题的方法。

标签： javascript html css twitter-bootstrap stylesheet

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

您能否详细说明为什么不能使用表格？

【讨论】：

您为什么不使用引导程序 .span 作为列，并在每列中使用 .row-fluid 来制作行 - 而不是您的创意标记选项？会有很多标记，但仍然正确。
你的意思是这样吗？ jsfiddle.net/m7wd5/4 对于较短的文本，它可以正常工作（参见版本 3）。对于长文本，这会导致换行问题
引导网格系统的文档不再可用。

【解决方案2】：

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

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

（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”来定位特定的屏幕宽度。

限制

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

如果中间的栏有足够的内容，它只会占据完整的可用宽度。

【讨论】：

另外，如果在第二行您有不同宽度的内容，您的表格单元格将不会与固定宽度的单列对齐。
我读到overflow:hidden; 是另一种防止内容包裹在浮动下的方法，我认为这是更可取的方法。

【解决方案3】：

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

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

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

注释：

“！important”子句可能会被删除（我不确定）
在我的项目中，已知文本无论如何都很小。

【讨论】：

谢谢！！我喜欢它，为我修好了，没有其他效果。

【解决方案4】：

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

【讨论】：