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;
}

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