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

Question

我在 bootstrap 中有一堆输入，它们有 input-group-addon 标签作为标签。在我的页面上，我有不同长度的文本标签，但我希望所有标签的宽度都相同以达到视觉效果。我正在尝试手动将这些 span 元素的宽度设置为我在页面上拥有的最大宽度（例如，75px）。

制作我自己的 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 以外的其他名称，但这取决于您。