具有一列自动宽度的引导网格答案

【问题标题】：Bootstrap grid with one column auto width具有一列自动宽度的引导网格
【发布时间】：2015-01-03 00:23:10
【问题描述】：

我正在使用 bootstrap 3，我正在尝试制作一个项目列表，其中每行有 4 列.. 我尝试使用 bs3 网格系统，但它不符合我的所有要求（或者至少我无法使其工作），因为其中一列需要使用所有可用空间..

例子：

_____________________________________________________________________________ | | |集装箱 | |复选框|名称（130px）|留言 |日期| |复选框|名称（130px）|留言日期| |复选框|名称（130px）|留言 adsadsadsadsadsadsadsaaaaaaaaaaaaaa... |日期| |复选框|名称（130px）|留言 |日期| |复选框|名称（130px）|留言 |日期| |.... | |_______________________________________________________________________________|

基本上，日期列应该一直在右边，消息列应该使用所有可用的宽度，如果消息大于可用空间，就应该截断（或者溢出隐藏）

谢谢

【问题讨论】：

您可以使用 3-column 3-column 6-column 之类的结构，并在最后一个 put 消息和日期中使用自定义 css 属性来完成...
Bootstrap 列适用于响应式网格。它们不应该像桌子一样使用。您正在寻找的是display: table-cell; 场景。只需将您的 div 包装在一个 col-xs-12 列中即可。

标签： css twitter-bootstrap

【解决方案1】：

请注意，Bootstraps 网格主要是布局目的，您在这里拥有的是基于网格的内容，也就是表格。

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
html,
body {
  width: 100%;
  margin: 0;
}
table {
  width: 100%;
  table-layout: fixed;
}
td:first-of-type,
td:last-of-type {
  width: 50px;
}
td:nth-of-type(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table class="table table-striped">
  <tr>
    <td>fit</td>
    <td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
      stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
    <td>fit</td>
  </tr>
  <tr>
    <td>fit</td>
    <td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
      stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
    <td>fit</td>
  </tr>
  <tr>
    <td>fit</td>
    <td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
      stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
    <td>fit</td>
  </tr>
  <table>

【讨论】：

【解决方案2】：

您可以将divs 包装在一个大列中，然后在这些列上设置display: table-cell：

类似于下面的 sn-p。

小提琴：http://jsfiddle.net/abhitalks/qan2khse/

片段：

div.table {
    border: 1px solid gray;
    border-collapse: collapse;
    display: table;
}
div.cell {
    border: 1px solid gray;
    display: table-cell;
}
div.cell:first-child, div.cell:nth-child(2)  {
    width: 10%;
}
div.cell:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.cell:last-child {
    width: 10%;
    text-align: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <span>Caption</span>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 table">
            <div class="cell">one</div>
            <div class="cell">two</div>
            <div class="cell">three</div>
            <div class="cell">four</div>
        </div>
    </div>
</div>

【讨论】：