通过相同的宽度对齐input-group-addon。无法覆盖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以外的其他内容，但这取决于您。