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

标签 html css ruby-on-rails twitter-bootstrap

我正在构建一个 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>
                            ...

字体大小没有问题。但是,无论我做什么,margin-top 都不会覆盖。显然,我还没有足够的声誉来发布图片,所以我无法发布 chrome 开发人员工具显示的内容,但这里有一个 link到屏幕截图。

我的覆盖(在第 4922 行)明确地(据我所知)是整个最终 css 文件中对 .help-block 的最后一次引用,而来自第 1528 行的那个是幸存的那个。我也尝试过(作为实验)覆盖所有边距:

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

当我这样做时,除了上边距之外的所有边距都被覆盖(再次)。我在这里缺少什么?

最佳答案

听起来很蠢但是...你试过使用 !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;
}

关于html - 无法覆盖 Rails 中的 Bootstrap .help-block margin-top,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20926609/

相关文章:

javascript - 如何同步 Three.js 和 HTML/SVG 坐标系(特别是 w.r.t. y 轴)?

css - 如何在背景图像中添加来自 Angular Material 的图标?

css - Bootstrap 模式停止在 Chrome 41 上使用鼠标滚动/触摸板滚动(但适用于向上/向下键)

ruby-on-rails - Rails + Devise-自定义 Controller 中的Authenticate方法

ruby-on-rails - capistrano 回滚会撤消迁移吗?

ruby-on-rails - 您可以在elastic beanstalk环境中运行rails控制台或rake命令吗?

html - 有什么插件可以在 HTML5 中录制视频和音频并回退到 Flash?

css - 如何垂直对齐div中的图像?

css - 如何让 'Reactjs Modal'出现在屏幕上从右到中飞

html - Nodejs 表达 html