Question

所以我在某些表单页面上使用bootstrap breadcrumb但是当我使页面变小时我无法获得用于内容和堆叠的活动标记因为类而不能很好。长话短说，这就是我想做的事
这就是我得到的
所以这是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已经是绿色的，所以你可以在第二张图片中看到所以我现在需要做的就是测试是将hr线放在活动的右边部分以及一些如何获得这样的线并使其正确堆叠更小的设备。

Bread CRUMB如果您可以帮助我编辑它，那么这是文件，那就更好了。

Answer 1

尝试使用引导网格布局 - http://getbootstrap.com/examples/grid/。
此外，如果您可以使用bootstrap glyphicons - 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文件或此页面中添加此代码 < / p>

<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 Bread Crumbs内容和堆叠

3 个答案: