Question

我使用bootstrap创建了nav-tabs。标签会更改正文内容。我想一次只适合5个标签，并希望在nav-tab上添加一个滑块。使用flexslider会以某种方式改变UI效果。请任何人都可以帮忙。

<div class="row">
<div class="col-md-12">
    <div class="color_gray_shad height_box flexsliderDenim">
        <ul class="nav nav-tabs slides">
            <li id="denim_li1" class="active info_list" style="margin-left: 12%;"> <a class="info_tab" href="#tab1default" data-toggle="tab" role="tab">    <img class="img-responsive denimImagePad"         src="http://placehold.it/50x80"></a> 
            </li>
            <li id="denim_li2" class="info_list"> <a class="info_tab" href="#tab2default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80" style="position: absolute;top: 22%;"></a>

            </li>
            <li id="denim_li3" class="info_list" style="width: 16%;"> <a class="info_tab" href="#tab3default" data-toggle="tab" role="tab"><img class="img-responsive" src="http://placehold.it/50x80" style="position: absolute;top: 36%;"></a>

            </li>
            <li id="denim_li4" class="info_list"> <a class="info_tab" href="#tab4default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80"></a>

            </li>
            <li id="denim_li5" class="info_list"> <a class="info_tab" href="#tab5default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80" style="position: absolute;top: 22%;"></a>

            </li>
                                <li id="denim_li5" class="info_list"> <a class="info_tab" href="#tab5default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80" style="position: absolute;top: 22%;"></a>

            </li>
                                                    <li id="denim_li5" class="info_list"> <a class="info_tab" href="#tab5default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80" style="position: absolute;top: 22%;"></a>

            </li>
        </ul>
    </div>
</div>

CSS

.color_gray_shad {
/* background-color:#EEEEEE; */
}
.height_box {
    height:18%;
}
.nav-tabs>li.info_list {
    width:14%;
}
.nav-tabs>li.active>a.info_tab:before {
  content:' ';
  position: absolute !important;
  width: 0;
  height: 0;
  left: 43%;
  top: 111px;
  border: 10px solid;
  border-color: #C04C36 transparent transparent transparent;
  z-index: 100;
}
.nav-tabs>li.active>a.info_tab, .nav-tabs>li.active>a.info_tab:focus, .nav-tabs>li.active>a.info_tab:hover {
  background-color: #C04C36;
  text-align: center;
  height: 113px;
  background-color: #C04C36;
  border: 1px solid #C04C36;
  -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
  border-radius: 0px;
  /* -webkit-box-shadow: 2px 2px 4px #002554; */
  -moz-box-shadow: 2px 2px 4px #C04C36;
  /* box-shadow: 2px 2px 4px #002554; */
}

如何使bootstrap nav-tabs滑动？

0 个答案: