我使用bootstrap创建了一个彩色的盒子。我想添加一条从左到右的水平线,如第二张图所示。我尝试在按钮中添加具有边框的新div,但它不适合整个框的宽度。
图:边框不适合右侧容器的图像
图:容器中预期的合身边框
这是我的代码。
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<br>
<br>
<div class="container" style="color:white;">
<div>
<div class="row row-eq-height">
<div class="col-lg-5 col-md-5">
<div class="row row-eq-height">
<div class="col-md-4 col-lg-4" style="background-color:darkorange;padding:15px; text-align:center;">
<div><i class="fa fa-book fa-5x"></i></div>
<div style="color:white;font-size:large;">Grades</div>
</div>
<div class="col-md-8 col-lg-8" style="background-color:#FFB964; font-weight:bold; ">
<div class="col-md-12 col-lg-12">
<span style="font-size:48px;color:silver;">0</span>
<span style="font-size:large;">New Grades</span>
</div>
<div class="col-md-12" style="border-bottom:1px solid red; "></div>
<div class="col-md-12 col-lg-12" style="padding:5px;">
<span style="float:left;">Last Grade: 100</span> <span style="float:right;">Date: 3/26</span>
</div>
<div class="col-md-12 col-lg-12" style="padding:5px;">
<span style="float:left;">Name: Animal Thumbnail</span>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-md-5 col-lg-offset-2 col-md-offset-2">
<div class="row row-eq-height">
<div class="col-md-4 col-lg-4" style="background-color:deepskyblue;padding:15px; text-align:center;">
<div><i class="fa fa-pencil fa-5x"></i></div>
<div style="color:white;font-size:large;">Grades</div>
</div>
<div class="col-md-8 col-lg-8" style="background-color:#5BD4FC; font-weight:bold; ">
<div class="col-md-12 col-lg-12">
<span style="font-size:48px;color:silver;padding:10px;">0</span>
<span style="font-size:large;">New Assignments</span>
</div>
<div class="col-md-12" style="border-bottom:1px solid red; "></div>
</div>
</div>
</div>
</div>
</div>
<div style="padding-top:50px;">
<div class="row row-eq-height">
<div class="col-lg-5 col-md-5">
<div class="row row-eq-height">
<div class="col-md-4 col-lg-4" style="background-color:rebeccapurple;padding:15px; text-align:center;">
<div><i class="fa fa-check-square-o fa-5x"></i></div>
<div style="color:white;font-size:large;">Grades</div>
</div>
<div class="col-md-8 col-lg-8" style="background-color:#8F59FF; font-weight:bold; ">
<div class="col-md-12 col-lg-12">
<span style="font-size:48px;color:silver;padding:10px;">0</span>
<span style="font-size:large;">New Postings</span>
</div>
<div class="col-md-12" style="border-bottom:1px solid red; "></div>
<div class="col-md-12 col-lg-12" style="padding:5px;">
<span style="float:left;">Last Abs Per: 07</span> <span style="float:right;">Date: 3/26</span>
</div>
<div class="col-md-12 col-lg-12" style="padding:5px;">
<span style="float:left;">Name: Absent-Unexcused</span>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-md-5 col-lg-offset-2 col-md-offset-2">
<div class="row row-eq-height">
<div class="col-md-4 col-lg-4" style="background-color:crimson;padding:15px; text-align:center;">
<div><i class="fa fa-comment-o fa-5x"></i></div>
<div style="color:white;font-size:large;">Messages</div>
</div>
<div class="col-md-8 col-lg-8" style="background-color:#F16A85; font-weight:bold; ">
<div class="col-md-12 col-lg-12">
<span style="font-size:48px;color:silver;padding:10px;">0</span>
<span style="font-size:large;">New Messages</span>
</div>
<div class="col-md-12" style="border-bottom:1px solid red; "></div>
</div>
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/ZPNepV
我的边框不适合正确的容器。
<div class="col-md-12" style="border-bottom:1px solid red; "></div>
尝试使用!important
规则将div余量和填充设置为0。