Question

的工作示例

<div class="form-group">
    <label for="inputTwitter" class="control-label">Twitter</label>
    <div class="input-group">
       <span class="input-group-addon">@</span>
        <input type="text" pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" id="inputTwitter" placeholder="1000hz" required>
    </div>
    <span class="help-block with-errors">Up to 20 letters, numbers and underscores</span>
 </div>

这是我的示例，span使用相同的class

    .form-group
    #datepicker.input-daterange.input-group
        input#offlineStartDate.input-sm.form-control(type='text')
        span.input-group-addon a
        input#offlineEndDate.input-sm.form-control(type='text')
        span.input-group-btn
            button#refreshDates.btn.btn-default.btn-sm(type='button')
                i.fa.fa-refresh.fa-lg

验证后（只检查输入中是否有日期），我解雇了这个（我已尝试设置.input-group和.form-group）

$('#offlineStartDate').closest('.input-group').addClass('has-error');       
$('#refreshDates').addClass('btn-danger');
$('#refreshDates').blur();

问题是background-color中没有border-color和span。这是一个screenshoot，显示datepicker未应用span's class，以及Chrome控制台中span的属性。

知道为什么会这样吗？

修改即可。我尝试过的事情

。我强迫主要div使用.form-group.has-error类，但仍然......，span未正确呈现。
。为了以防万一，我已经将我的自定义bootstrap替换为库存...，同样的事情发生了。

编辑2

应用css上的另外两个屏幕截图。

Screen 1
Screen 2

我使用的自定义bootstrap只影响表格和字体。我没有改变那么多。

Answer 1

根据您提供的屏幕截图，问题是您有两个CSS规则，border属性的值不同。

现在您已经清楚地确定了问题，应该很容易纠正它。如果您无法自己找到解决方案（我会在一分钟内建议您），我高度建议您花几个小时来正确学习CSS。

你的问题与“Jade”或“twitter-boostrap”无关（我还建议你在帖子上更改这些标签）。这是一个纯粹（非常简单）的CSS问题。

所以，如果你看过我建议你的关于CSS技巧的帖子，你可能得出结论：.input-daterange .input-group-addon和.has-error .input-group-addon试图为你的元素定义不同的边框颜色，并且相同的值10。因此，最后加载的css规则优先。

因此，您可以在bootstrap-custom.css之后加载datepicker3.css，或者通过将bootstrap-custom.css更改为.has-error .input-group-addon或其他任何内容，在.has-error span.input-group-addon中为您的规则添加说明，只要您为规则添加了特定性。

但是，再一次，正确地学习CSS，或者你会来SO去问这样的10个问题。

希望能解决你的问题。

Bootstrap has-error未应用于span

1 个答案: