Bootstrap 中的固定宽度表格列 [英] Fixed width table columns in Bootstrap

问题描述

我将引导程序 3 用于后端应用程序，此应用程序在表格中显示数据.在每一行的末尾有一个删除按钮(有时还有一个编辑按钮).

I'm using bootstrap 3 for a backend application, this application shows data in tables. At the end of each row there is a delete button (and sometimes also a edit button).

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

I use col-md-1 for the column that has the delete button, and variations of col-md-x on the other columns, works fine.

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

One thing that bugs me is that when i enlarge my browser window the col-md-1 column becomes huge, makes sense because of bootstrap grid design. Here's a screenshot:

但是每次我看它时它仍然让我感到烦恼.

But it still bugs me every time i look at it.

是否可以给列一个固定的宽度，例如 32 像素，同时继续使用我非常喜欢的 bootstrap 的 col-md-x 功能?

Is it possible to give a column a fixed width, for example 32 pixels, while keep using the col-md-x feature of bootstrap which i really enjoy?

可能需要澄清一下:我正在寻找最大宽度，例如最小宽度 32 和最大宽度 32，那么该列的宽度不应超过 32 像素，也不应缩小到小于 32 像素.

[edit] maybe a clarification: I'm looking for a maximum width, for example min width 32 and max width 32, then the column should not grow wider than 32 px and shouldn't shrink to less than 32 px.

推荐答案

 .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.奇怪！

Now the tdicon column becomes 32 px and stays 32 px after resizing. Weird!

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

I'm happy that is works, but the solution confuses me...

这篇关于Bootstrap 中的固定宽度表格列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！