Question

我正在构建一个Rails应用程序，我正在尝试从custom.css.scss中的Bootstrap覆盖两个样式的.help-block类。这是css：

.help-block {
    margin-top: 5px;
    font-size: 12px;
}

这是HTML：

<div class="container outer">
    <div class="row">
        <div class="span6 offset3">
            <div class="form-container">
            ...
                <form class="form-horizontal">
                ...
                    <div class="control-group">
                        <label class="control-label" for="nickname">Nichname*</label>
                        <div class="controls">
                            <input type="text" id="nickname" required>
                            <span class="help-block">Example: "Mrs. Locke," "Mr. Almeida"</span>
                            ...

font-size无问题。但是，无论我做什么，margin-top都不会覆盖。显然，我还没有足够的声誉来发布图片，所以我无法发布Chrome开发者工具显示的内容，但这里是截图的link。

我的覆盖（在第4922行）绝对是（据我所知）在整个最终css文件中对.help-block的最后一次引用，然而第1528行中的那个是幸存的。我也试过（作为一个实验）覆盖所有边缘：

.help-block {
    margin: 5px;
    font-size: 12px;
}

当我这样做时，除了上边距（再次）之外，所有边距都被覆盖。我在这里缺少什么？

Answer 1

听起来很愚蠢，但是......你尝试过使用!important吗？

.help-block {
    margin-top: 5px !important;
    margin-left: 5px; #or whatever
    margin-right: 5px; #or whatever
    margin-bottom: 5px; #or whatever
    font-size: 12px;
}

无法在Rails中覆盖Bootstrap .help-block margin-top

1 个答案: