两格之间的水平线
我使用引导程序创建了一个彩色框。我想添加一条水平线，从左到右，如第二张图片所示。我尝试在按钮中添加带边框的新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>
2 个答案:
答案 0 :(得分：2)
引导程序3 中用于删除列填充的限制很少，您需要使用padding: 0 !important CSS 来编写p-0类strong>并在所有正确的部分添加.p-0 {
padding: 0 !important;
}
.row-eq-height {
display: flex;
}类。我刚刚更新了您的代码，希望对您有所帮助。谢谢
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<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 p-0" 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 p-0" 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 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>
</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 p-0" 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 p-0" 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 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>
</div>
</div>SET bc:= 0
UPDATE test.cashbook
Set balanceBroughtFoward = bc, balanceCarriedFoward = (bc:= totalCash - (Lodgement + Expenses) )
答案 1 :(得分：0)
尝试使用!important规则将div边距设置为0。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？