html - Bootstrap Bread Crumbs 内容和堆叠

Question

因此，我正在为某些表单页面使用 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这是文件，如果你能帮我编辑一下就更好了。

Answer 1

将您的 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);
 }

工作代码笔示例:http://codepen.io/anon/pen/vLxWed