Bootstrap标签的宽度相同(Bootstrap same width for labels)

Bootstrap标签的宽度相同(Bootstrap same width for labels)

我使用Bootstrap 3.我有5个不同的label ，我想将它们的width设置为最大值并居中文本。

例如，每个label的width应该等于红色。

<span class="label label-md label-danger">Merkez Tarafından Reddedildi</span>

I am using Bootstrap 3. I have 5 different labels and I want to set their width to the maximum one and center the text.

For example every label's width should be equal to red one.

<span class="label label-md label-danger">Merkez Tarafından Reddedildi</span>

最满意答案

这是因为.label是一个内联元素，您必须设置为inline-block ，然后设置min-width

bootstrap已经将文本置于.label因此不用担心这一点。

注意：我已经使用过!important对于演示!important ，在代码中不惜一切代价避免使用。

.label {
  min-width: 200px !important;
  display: inline-block !important
} 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<span class="label label-md label-danger">Merkez Tarafından Reddedildi</span>
<hr />
<span class="label label-md label-info">Merkez</span>
<hr />
<span class="label label-md label-warning">Merkez Tarafından </span>
<hr />
<span class="label label-md label-success">Tarafından Reddedildi</span>
<hr />
<span class="label label-md label-default">Tarafından</span>
<hr />
<span class="label label-md label-primary">Tarafından lipsum</span> 
  
 
It's because .label is an inline element, you must set as inline-block and then set a min-width
 
The bootstrap already centers the text in .label so no need to worry about that.
 
Note: I've used !important just for the demo, avoid at all cost using in your code.
 
 
 
  
  
.label {
  min-width: 200px !important;
  display: inline-block !important
} 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<span class="label label-md label-danger">Merkez Tarafından Reddedildi</span>
<hr />
<span class="label label-md label-info">Merkez</span>
<hr />
<span class="label label-md label-warning">Merkez Tarafından </span>
<hr />
<span class="label label-md label-success">Tarafından Reddedildi</span>
<hr />
<span class="label label-md label-default">Tarafından</span>
<hr />
<span class="label label-md label-primary">Tarafından lipsum</span>