css - 通过相同的宽度对齐输入组插件。不能覆盖 CSS？

Question

我在 bootstrap 中有一堆输入，它们有 input-group-addon 标签作为标签。在我的页面上，我有各种长度的文本标签，但为了视觉效果，我希望所有标签的宽度都相同。我试图手动将这些跨度元素的宽度设置为我在页面上拥有的最大宽度(对于本例，假设为 75 像素)。

创建我自己的 CSS 类并不能解决问题，bootstrap 会以我不理解的方式覆盖它。

制作我自己的 .input-group-addon.myClass CSS 类也不起作用。浏览器显示这没有被另一种样式覆盖，但我没有看到它实际上影响了 span 元素。

最后，简单地向 span 添加一个 style="width:75px"也不起作用。

我不知道如何改写这种样式，使我的所有跨度都对齐，而不管文本长度如何。

代码示例:http://www.bootply.com/SvJAiwVavY

Answer 1

我查看了您的示例代码。在 Bootstrap 中，.input-group-addon 类有一个 display 属性设置为 table-cell，所以不需要做任何事情除了设置适当的宽度。如果您设置的宽度小于包含的文本，它看起来不会像已更改一样。尝试将您的示例代码更改为以下内容:

.input-group-addon.test {
   width: 200px !important;
}

您可能希望将 text-align 更改为 center 以外的内容，但这取决于您。