引导标签的相同宽度答案

【问题标题】：Bootstrap same width for labels引导标签的相同宽度
【发布时间】：2018-04-29 21:07:21
【问题描述】：

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

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

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

【问题讨论】：

您可以添加 col-- 以及标签类来调整标签的宽度。
我试过了，但这次不是label-md，而是label-sm。
指定所有标签的最小和最大宽度
各位，如果你愿意，可以给出答案，我可以检查其中一个是否已解决。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

引导程序已经将 .label 中的文本居中，因此无需担心。

注意：我使用!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>

【讨论】：

使用!important 是完全没有必要的演示或其他方式：.label.label-md。
而且它只是最小宽度，如果有更多文本，那么这些框的宽度将不会相同。
@Frutis，min-width 不能在内联元素中使用，
@vanburen 我非常了解 CSS 的特殊性，我知道我可以使用它，但是该选择器对用户来说并不实用，假设用户拥有 label-sm 而选择器会失败，这就是为什么我必须使用通用选择器，知道堆栈 sn-p 不能很好地加载 CSS（顺序），但解释了为什么我使用 !important 以及为什么用户应该 NOT使用它
@dippas 我从来没有说过你不知道 特异性 或其他任何重要的东西，阅读本文的其他人可能不会考虑你的警告，所以我相信最好建议使用另一个类并将其作为示例进行解释，而不是使用您自己建议不惜一切代价避免在代码中使用的示例。

【解决方案2】：

想不出你想要的确切答案，但也许这对你来说会更好。

.label {
    width:200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.label:hover {
    white-space: normal;
}

【讨论】：

不知道，对我来说很好用。也许宽度太高了，您看不到如果有更多文本，它的外观会有所不同。这背后的想法是设置固定宽度，如果有更多内容，它会在悬停时展开。