Bootstrap 中的固定宽度表列答案

【问题标题】：Fixed width table columns in BootstrapBootstrap 中的固定宽度表列
【发布时间】：2015-01-07 03:44:44
【问题描述】：

我正在将 bootstrap 3 用于后端应用程序，该应用程序在表格中显示数据。在每一行的末尾都有一个删除按钮（有时还有一个编辑按钮）。

我对具有删除按钮的列使用 col-md-1，在其他列上使用 col-md-x 的变体，效果很好。

让我烦恼的一件事是，当我放大浏览器窗口时，col-md-1 列变得很大，因为引导网格设计是有意义的。截图如下：

但每次我看它时它仍然困扰着我。

是否可以为列提供固定宽度，例如 32 像素，同时继续使用我真正喜欢的 bootstrap 的 col-md-x 功能？

[编辑] 可能是一个澄清：我正在寻找一个最大宽度，例如最小宽度 32 和最大宽度 32，那么列不应增长超过 32 像素并且不应缩小到小于 32 像素。

【问题讨论】：

可以这样做。
@Christina 很高兴听到，但问题是如何？
如果 2 col 是 50px 宽，则在两者上放置一个类并使用自定义类设置 width:50px 然后在最接近的 2 col-XX 上找到宽度，例如 25%（col- X-3) 编写重新声明宽度减去 50px (calc) 的 css——这将在媒体查询中完成。
@Christina 这听起来很复杂，但我想我明白了，你会根据浏览器的宽度获得不同的宽度。
这很容易，但是由于您没有提供一个完整的例子来说明您的情况，所以我不会为您创建它。

【解决方案1】：

有可能，在 css 中创建自己的类并定义任何你想要的并将它与 Column 类一起使用，例如......

<div class="col-md-1 your-class-here">define some data</div>

使用上面的策略，希望能解决问题...

【讨论】：

为这个建议干杯，但我已经尝试过了，但我又试了一次。但这似乎不起作用，我使用 .tdicon{ width: 32px !important; }，在 td 和 th 上，但列仍在增长。我什至直接在 td 中尝试过，例如“td width=32”。我怀疑这指定了最小宽度，而不是最大宽度？过去我通过在 1 td 上使用 100% 并在其他列上使用 32px 来解决它，但是使用引导程序没有多大意义。
尝试删除网格类，然后删除具有固定宽度的自定义类
如果您使用的是纯引导图标，请将其与 link This 混合使用。
@MattLambert 感谢您的想法，我试了一下，但没有成功。但它给了我一个想法，看看我的回答。

【解决方案2】：

 .tdicon{ width: 32px !important; }

这不起作用：

<th class="col-md-6"></th>
<th class="col-md-2"></th>
<th class="col-md-4"></th>
<th class="tdicon">&nbsp;</th>
<th class="tdicon">&nbsp;</th>

但这有效：

<th class="col-md-6"></th>
<th class="col-md-2"></th>
<th></th>
<th class="tdicon">&nbsp;</th>
<th class="tdicon">&nbsp;</th>

现在 tdicon 列变为 32 px 并在调整大小后保持 32 px。奇怪！

我很高兴这是可行的，但解决方案让我感到困惑......

【讨论】：

它可能有效，因为无类 th 允许具有任何大小，而 col-md-* 列被锁定为百分比。但是，你为什么不把你的图标放在一列，然后把它们放在一个带有pull-right的div中呢？