twitter-bootstrap Bootstrap 中的固定宽度表格列

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26850564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:50:20  来源:igfitidea点击:

Fixed width table columns in Bootstrap

csstwitter-bootstrap

提问by TinusSky

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).

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

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 用于具有删除按钮的列,以及其他列上 col-md-x 的变体,效果很好。

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:

困扰我的一件事是,当我放大浏览器窗口时,col-md-1 列变得很大,这是有道理的,因为引导网格设计。这是一个屏幕截图:

enter image description here

在此处输入图片说明

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

但是每次看的时候还是觉得很烦。

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 像素,同时继续使用我真正喜欢的 bootstrap 的 col-md-x 功能?

[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.

[编辑] 也许是一个澄清:我正在寻找最大宽度,例如最小宽度 32 和最大宽度 32,那么该列的宽度不应超过 32 像素,也不应缩小到小于 32 像素。

采纳答案by TinusSky

 .tdicon{ width: 32px !important; }

This doesn't work:

这不起作用:

<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>

But this works:

但这有效:

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

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

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

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

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

回答by TinusSky

it's possible, make your own class in css and define whatever you want and use it with the Column class, for example....

有可能,在 css 中创建您自己的类并定义您想要的任何内容并将其与 Column 类一起使用,例如....

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

use the above strategy, hope it will solve the issue...

使用上述策略,希望它会解决问题...