在Bootstrap中固定宽度表格列

Question

我正在使用Bootstrap 3开发后端应用程序，该应用程序在表格中显示数据。每行末尾都有一个删除按钮（有时还有编辑按钮）。 我在拥有删除按钮的列上使用col-md-1，在其他列上使用col-md-x的变化，效果很好。 有一件事让我感到困扰，就是当我放大浏览器窗口时，col-md-1列变得非常大，这是由于Bootstrap网格设计的缘故。下面是一个屏幕截图： 但是，每次看到它仍然会让我感到不舒服。 是否可以给列一个固定宽度，例如32像素，同时保持使用Bootstrap的col-md-x功能，这是我非常喜欢的？ [编辑]可能需要澄清：我正在寻找最大宽度，例如最小宽度为32，最大宽度为32，然后该列不应超过32像素，并且不应缩小到少于32像素。

- TinusSky

---

可以做到这一点。 - Christina

@Christina 很高兴听到这个消息，但问题是如何实现呢？ - TinusSky

如果两个列宽度为50像素，给它们都加上一个自定义类，并将宽度设置为50像素。然后，在最接近的两个列-X-X中找到宽度，假设为25%（col-X-3），编写CSS重新声明该宽度减去50像素（使用calc函数）-- 这应该在媒体查询中完成。 - Christina

@Christina 听起来很复杂，但我认为我理解了，你将根据浏览器宽度获得不同的宽度。 - TinusSky

这很容易，但由于您没有提供完整的示例，我不会为您创建它。 - Christina

@Christina 不需要示例，很快就会深入学习媒体查询，听起来很有趣！ - TinusSky

Answer 1

 .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像素，并在调整大小后保持32像素。很奇怪！ 我很高兴它能工作，但是这个解决方案让我感到困惑...

- TinusSky

---

你是不是意思是没有关闭 <th> 标签？这会使你的HTML无效。 - Matt Lambert

@MattLambert，它们在我的应用程序中是关闭的，我不想通过粘贴所有代码来使我的回复过于复杂，th 中有很多东西。但我已经编辑并添加了 </th>，只是为了正确；-)实际上，我仍然没有使用自己的解决方案，因为对我来说这没有太多意义...我将不得不在空闲时间深入研究 Bootstrap 机制，看看为什么这样可以工作。 - TinusSky

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

Answer 2

这是可能的，你可以在CSS中创建自己的类并定义任何你想要的内容，然后与Column类一起使用，例如...

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

使用上述策略，希望能解决这个问题...

- user3931708

---

谢谢你的建议，但我已经尝试过了，但我又试了一次。但它似乎不起作用，我在td和th上使用.tdicon{ width: 32px !important; }，但列仍然增长。我甚至尝试直接在td中使用"td width=32"。我怀疑这指定了最小宽度，而不是最大宽度？过去我通过在1个td上使用100％和在其他列上使用32px来解决它，但是在使用bootstrap时这没有太多意义。 - TinusSky

尝试移除网格类，然后使用固定宽度的自定义类。 - Matt Lambert

如果您正在使用纯Bootstrap图标，则可以将其与链接混合使用。 - user3931708

@MattLambert 感谢您的建议，我尝试了一下但没有成功。不过这给了我一个想法，请看我的回答。 - TinusSky