Bootstrap模态标题登录更改底线颜色

Question

我正在使用Bootstrap登录模板,我想更改底线颜色model-header并在左右边框上对齐此行.

<div id="login-ar" class="container" aria-hidden="true">
    <div class="modal-header">
        <h1 class="text-center" id="login-tit">Login</h1>
    </div>
    <div class="modal-body">
        <form role="form">
            <div class="form-group">
                <input type="email" class="form-control" id="email" placeholder="Enter email">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
            </div>
            <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
            </div>
        </form>
    </div>
    <div class="modal-footer">
         <button class="btn btn-link">Forgot password?</button>
         <button class="btn btnExtra btn-large btn-primary">Login</button>
    </div>
</div>

Answer 1

ninjaxelite,这两个类modal-footer和modal-header使用
border-top: 1px solid #e5e5e5;页脚和border-bottom: 1px solid #e5e5e5;页眉.
你可以通过添加Bootstrap css下面的两个类来覆盖它们.
页眉和页脚都是全宽.因此比你内心的内容更广泛.
您可以删除这些边框线并为页眉和页脚添加颜色背景,以此更改其外观.
或者,如果您仍然希望这些线条隐藏边框顶部和底部线条并添加<hr class="yourcolor">到您的内容中.
这可能是一种在这里做你想做的事情的方法.

以下是您用来覆盖主Bootstrap css的Bootstrap类.

 .modal-header {
  min-height: 16.42857143px;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  }

.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

如果你只想改变modal-header颜色和宽度,border-bottom你需要使用它......
我为标题背景着色aqua只是为了显示标题的整体宽度.

.modal-header {
  min-height: 16.42857143px;
  padding: 15px;
  border-bottom: 3px solid #ff0000;
  margin-left: 15px;
  margin-right: 15px;  
  background-color: aqua;
}

但它看起来像这样......