twitter-bootstrap Bootstrap modal-header Login 更改底线颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30684585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap modal-header Login change bottom line color
提问by ninjaxelite
I am using Bootstrap login template and I want to change the bottom line color of model-headerand align this line on left and right border.
我正在使用 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>
回答by AngularJR
ninjaxelite, both classes modal-footerand modal-headeruseborder-top: 1px solid #e5e5e5;for the footer and border-bottom: 1px solid #e5e5e5;for the header.
You could override these by adding the two classes below the Bootstrap css.
Both the header and footer are full width. and therefore wider than your inner content.
You could remove these border lines and add a color background to the header and footer as a way to change how this looks.
Or if you still want these lines hide the border top and bottom lines and add <hr class="yourcolor">into your content.
That may be a way to do what you want here.
ninjaxelite，用于页脚和页眉的两个类modal-footer和modal-header用途。
您可以通过在 Bootstrap css 下添加两个类来覆盖这些。
页眉和页脚都是全宽的。因此比你的内在内容更广泛。
您可以删除这些边框线并为页眉和页脚添加颜色背景，以改变其外观。
或者，如果您仍然希望这些线条隐藏边框顶部和底部线条并添加到您的内容中。
这可能是一种在这里做你想做的事情的方法。 border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;<hr class="yourcolor">
Here are the Bootstrap classes for you to use to override the main Bootstrap css.
以下是用于覆盖主 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;
}
If you wanted to just change the modal-headercolor and width border-bottomyou would need to use this...
I color the header background aquajust to show the header overall width.
如果您只想更改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;
}
But it would look like this...
但它看起来像这样......
