如何在Twitter Bootstrap中创建动态宽度列 [英] How to create a dynamic width column in Twitter Bootstrap

问题描述

如何使用Twitter Bootstrap来创建表式列表结构，其中某些列需要足够的空间来容纳该列的最宽元素，而单个列则占用剩余空间？

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?

例如：

Id    |Name     |Email address                
100001|Joe      |[e-mail]
100   |Christine|[e-mail]
1001  |John     |[e-mail]

ID列只需要足够的空间容纳100001 ID即最长的ID。

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

名称列只有足够的空间容纳Christine的名字。

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

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

推荐答案

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

- 或者我不是。

Table like structure using the old table tag

Just kidding - or am i not.

<table class="table">
  <tr><th>Id</th>     <th>Name</th>      <th>Email address</th></tr>
  <tr><td>100001</td> <td>Joe</td>       <td>[e-mail]</td></tr>
  <tr><td>100</td>    <td>Christine</td> <td>[e-mail]</td></tr>
  <tr><td>1001</td>   <td>John</td>      <td>[e-mail]</td></tr>
</table>

使用网格系统

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

Using the grid system

In the documentation about the bootstrap grid system i could not find any auto-width building blocks. Everything out of the box has a certain width and a fixed number of columns:

   <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">[e-mail]</div>
    </div>
        <div class="row">
      <div class="span2">100</div>
      <div class="span2">Christine</div>
      <div class="span8">[e-mail]</div>
    </div>

因此，我假设你必须为3列表创建自己的版本，

Therefore i assume that you have to build your own version for a 3-column-table with auto-size.

在我的演示中，grid-column空间是窄的，或者如果空间太宽，则列被拉伸。

In my demo the grid-column wraps if the space is to narrow or, if the space is too wide, the columns are stretched.

我更新了我的演示。广告素材标记接近您要查找的内容

I updated my demo with a custom class. The creative markup comes close to what you are looking for

  <div class="row">
      <div class="spanFl">100000001 <br />
        100
      </div>
      <div class="spanFl">Joe <br/>
          Christine
      </div>
      <div class="spanFl">[e-mail] <br />
        [e-mail]
      </div>
  </div>    

使用css-3显示表

在 tutsplus 我发现一篇文章使用css-3 display：table 来设置一个类似布局的表。除非每行使用三个div，否则不会解决行换行问题。

Using css-3 display table

On tutsplus i found an article using css-3 display:table to set up a table like layout. Unless you use three divs for each row it does not solve row wrapping issues.

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

Bootstrap响应式设计

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

Bootstrap responsive design

As far as i understood the bootstrap documentation there is no built-in soultion for a 3-column layout with auto and remaining width. To Quote the responsive design page on bootstrap: "Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries."

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

Could you elaborate more why you can not use a table?

这篇关于如何在Twitter Bootstrap中创建动态宽度列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！