Bootstrap 面包屑内容和堆叠

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

尝试使用 bootstrap 网格布局 - http://getbootstrap.com/examples/grid/.
另外，如果你能使用 bootstrap 字形 - http://getbootstrap.com/components/

它会给你想要的结果。祝一切顺利

Answer 2

将您的 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

Answer 3

您可以在 css

中尝试此 :after 或 :before

.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{background-color:gray;float:none;    display: inline-block;
    vertical-align: top;
    font-size: 12px;list-style-type:none;position:relative;margin-left:50px;}

.borrow_breadcrumbs .breadcrumb > li + li:before {
  content: "";
  position:absolute;
  right:102%;
  left:-25px;
  top:50%;
  border-top:2px solid green;
}
.borrow_breadcrumbs .breadcrumb{font-size:0;white-space:nowrap;}

.borrow_breadcrumbs .breadcrumb > li + li:after, .borrow_breadcrumbs .breadcrumb >  li:first-child:after  {
  content: "";
  position:absolute;
  left:102%;
  right:-25px;
  top:50%;
  border-top:2px solid green;
}
.borrow_breadcrumbs .breadcrumb > li:last-child:after{
display:none;
}
.borrow_breadcrumbs .breadcrumb > .active {

  background-color: rgba(63, 255, 0, 0.18);
}

<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 文件中或本页

<style type="text/css">
    .borrow_breadcrumbs .breadcrumb > li{float:none;    display: inline-block;
    vertical-align: top;
    font-size: 12px;list-style-type:none;position:relative;margin-left:50px;}

.borrow_breadcrumbs .breadcrumb > li + li:before {
  content: "";
  position:absolute;
  right:102%;
  left:-25px;
  top:50%;
  border-top:2px solid green;
}
.borrow_breadcrumbs .breadcrumb{font-size:0;white-space:nowrap;}

.borrow_breadcrumbs .breadcrumb > li + li:after, .borrow_breadcrumbs .breadcrumb >  li:first-child:after  {
  content: "";
  position:absolute;
  left:102%;
  right:-25px;
  top:50%;
  border-top:2px solid green;
}
.borrow_breadcrumbs .breadcrumb > li:last-child:after{
display:none;
}
</style>

结果是

Bootstrap 面包屑内容和堆叠

Bootstrap Bread Crumbs content and stacking

html

css

breadcrumbs

twitter-bootstrap