如何使用 Bootstrap 设置自动调整大小但无响应的列答案

【问题标题】：How to set a column autosized, but non-responsive with Bootstrap如何使用 Bootstrap 设置自动调整大小但无响应的列
【发布时间】：2017-03-03 21:30:35
【问题描述】：

我有一张有 2 列的表格。表本身是响应式的。

由于通常一行没有被文本填满（剩余空间），所以多余的空间分布在两列上。

我希望左列的宽度与其内容所需的一样宽，并将其余部分（包括未使用的空间）放在右列。原因是右栏的内容是变化的，而左栏的内容是固定的。将未使用的空间分配给两列让右列无缘无故地跳转。但我无法用网格、百分比或像素表示左列的宽度。

我很确定我知道一个非常简单的解决方案，只需使用 html 和 css。但我现在不记得了。

代码没有什么特别之处。只需考虑到它包含填充右列的小胡子。用你想要的任何内容替换它。

<table class="table">
  <tr>
    <td>Company</td>
    <td>{{company.name}}</td>
  </tr>
  <tr>
    <td>Department</td>
    <td>{{department.name}}</td>
  </tr>
  <tr>
    <td>Tags</td>
    <td>
      <!-- this is replaced with a list of tags -->
      {{#associatedTags}}
       <span class="tag">{{name}}<a href="…" role="button">⊗</a>
       </span>
      {{/associatedTags}}
    </td>
  <tr>
    …
  <tr>
</table>

您可以想象，在标签行中添加标签会使内容变长。结果，右列的宽度更大。它的左边框向左移动，缩小了左列上的额外空间。这看起来很难看，因为它显示了一个没有非技术原因的动作。

【问题讨论】：

你能分享你的代码吗？
抱歉，我做到了。如您所见，这是非常默认的。
我不确定我是否理解您的目标。如果需要，您不想让左列换行（即使示例没有可以换行的标签）？您不希望左栏变得太窄，但又“尽可能宽”？您能否澄清一下它“看起来很丑”以及想要的结果是什么？
我不想让左列变得比它需要的宽，不管行中是否有未使用的间隔。整个未使用的空间应转到右栏。我添加了一个屏幕截图。最左边和最右边的行之间的间距应该始终为零。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我认为这就是您正在寻找的，虽然它不是特定于 Bootstrap。

.table tr td:first-child {
    width: 1%;
    white-space: nowrap;
}

http://www.codeply.com/go/OVeCpnFY7Q

【讨论】：

太棒了！确切地。我认为该解决方案并非特定于引导程序，而是想将其包含在我的 Q 中。

【解决方案2】：

一些代码会很有用。无论如何，您可以为您的行添加一个额外的类并添加以下 CSS：

.extraclass > .col {
  background-color: #FABABA;
  width: 200px !important; /* set the desired width */
}

<div class"container">
  <div class="row extraclass">
    <div class="col">
      example text
    </div>
  </div>
</div>

希望对你有帮助

【讨论】：

我不能说，以像素为单位设置什么宽度。