因此,我正在为某些表单页面使用 Bootstrap 面包屑,但我无法在内容上使用事件标记,并且当我缩小页面时,由于类的原因,堆叠效果不佳。长话短说,这就是我想做的
这就是我得到的
这是 html 代码。
<!-- BREAD CRUMBS -->
<section class="borrow_breadcrumbs">
<ol class="breadcrumb text-center">
<li class="active"><img src="img/star.png"><div class="bc">Credit rating</div></li>
<li><img class="fix" src="img/img2.png"><div class="bc">Select your loan</div></li>
<li><img src="img/img3.png"><div class="bc">Confirmation</div></li>
<li><img src="img/img4.png"><div class="bc">Get your loan</div></li>
</ol>
</section>
这是CSS
.borrow_breadcrumbs{
width:100%;
}
.borrow_breadcrumbs .bc{
margin-top: 10px;
color: #666666;
font-size: 14px;
}
.borrow_breadcrumbs ol{
border-bottom: 1px solid rgba(39, 38, 38, 0.25);
border-top: 1px solid rgba(39, 38, 38, 0.25);
}
.borrow_breadcrumbs li{
padding:20px 50px;
}
.borrow_breadcrumbs .breadcrumb > li + li:before {
content: "---------"
}
.borrow_breadcrumbs .breadcrumb > .active {
background-color: rgba(63, 255, 0, 0.18);
}
忽略两边的边框,拍照时出现的。而且我使用的 img 已经是绿色的,所以你可以在第二张图片中看到所以我现在需要做的测试是在 active 的右侧制作 hr 行,以及如何获得这样的行并使其正确堆叠更小的设备。
Bread CRUMB这是文件,如果你能帮我编辑一下就更好了。
最佳答案
将您的 CSS 更新为以下样式。
.borrow_breadcrumbs {
width: 100%;
}
.borrow_breadcrumbs .bc {
margin-top: 10px;
color: #666666;
font-size: 14px;
}
.borrow_breadcrumbs ol {
border-bottom: 1px solid rgba(39, 38, 38, 0.25);
border-top: 1px solid rgba(39, 38, 38, 0.25);
font-size: 0;
padding: 0;
}
.borrow_breadcrumbs li {
padding: 20px 50px;
display: inline-block;
text-align: center;
background-color: rgba(63, 255, 0, 0.18);
margin-right: 80px; /*Give according to your need*/
position: relative;
}
.borrow_breadcrumbs li:last-child{
margin-right: 0;
}
.borrow_breadcrumbs li:before{
content: "";
width: 50px; /*Give according to your need*/
height: 2px; /*Give according to your need*/
background:#000;
position: absolute;
left: 100%;
top: 0;
bottom: 0;
margin: auto;
margin-left: 15px; /*Give according to your need*/
}
.borrow_breadcrumbs li:last-child:before{
display: none;
}
.borrow_breadcrumbs .breadcrumb > .active {
background-color: rgba(63, 255, 0, 0.18);
}
关于html - Bootstrap Bread Crumbs 内容和堆叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34629359/