Fixed-Width Columns in Bootstrap

Question

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

I am using col-md-1 for a column with a delete button, and col-md-x options in other columns work fine.

One thing that bothers me is that when I expand the browser window, the col-md-1 column becomes huge, it makes sense because of the bootstrap grid design. Here is a screenshot:

But he still bothers me every time I look at him.

Is it possible to specify a fixed width for the column, for example 32 pixels, and continue to use the col-md-x bootstrap function that I really like?

[edit] explanation is possible: I'm looking for a maximum width, for example, a minimum width of 32 and a maximum width of 32, then the column should not increase by more than 32 pixels and should not be reduced to less than 32 px.

Answer 1

.tdicon{ width: 32px !important; } 

This does not 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 it 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> 

The tdicon column now becomes 32 px and remains 32 px after resizing. Weird!

I'm glad it works, but the solution confuses me ...

Answer 2

maybe create your own class in css and define whatever you want and use it with a column class like ...

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

use the above strategy, hope that it solves the problem ...