Question

我想替换要用下划线渲染的boostrap药丸。 1）因此，活动的“APPLE TREES”将显示在它的backgorund上没有药丸。相反，文本将以粗体显示，文本下方将有一个3px实线下划线（颜色＃e9a39c）。 2）如果你转到下一个标签。那个会变粗，并且3px实心强调下划线。 3）我不想展示任何药片

这是我的bootply： http://www.bootply.com/rvfgvjf0dF

这是我的HTML：

    <div class="content-section-c">

    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <h2>Sample Search Results</h2>
            </div>
        <div class="tabbable">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#pane1" data-toggle="tab">APPLE<br>
                TREES
                               </a></li>
            <li><a href="#pane2" data-toggle="tab">ORANGE<br>TREES</a></li>
            <li><a href="#pane3" data-toggle="tab">PEARS <br> TREES</a></li>
            <li><a href="#pane4" data-toggle="tab">BANANAS</a></li>
            <li><a href="#pane4" data-toggle="tab">GRAPE<br> TREES</a></li> 
                           </ul>
          <div class="tab-content">
            <div id="pane1" class="tab-pane active">
              <p>126 Results Founds</p>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/01_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/02_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/03_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/04_card.png"></div> 
                                                  </div>
            <div id="pane2" class="tab-pane">
            <p>75 Results Founds</p>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/05_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/06_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/07_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/08_card.png"></div> 
            </div>
            <div id="pane3" class="tab-pane">
              <p>144 Results Founds</p>
                                <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/09_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/10_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/11_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/12_card.png"></div> 
            </div>
            <div id="pane4" class="tab-pane">
              <p>170 Results Founds</p>
                                <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/01_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/02_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/03_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/04_card.png"></div> 
            </div>
            <div id="pane5" class="tab-pane">
              <p>256 Results Founds</p>
                                <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/01_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/02_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/03_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/04_card.png"></div> 
            </div>
          </div><!-- /.tab-content -->
        </div><!-- /.tabbable -->
        </div>

    </div>
    <!-- /.container -->
</div>
<!-- /.content-section-c -->

Answer 1

/* add bold font style and border bottom to active li elements */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid #e9a39c;
    font-weight: bold;
}

/* remove the "grey" border when hovering the li elements */
.nav-tabs>li>a:hover{
    border: 1px solid transparent;
}

/* remove the "grey" background colour when hovering the li elements */
.nav>li>a:focus, .nav>li>a:hover{
    background-color: transparent;
}

Bootply

<强>更新：

.nav-tabs{
    border-bottom: none; /* remove the "grey" underline from ul */
    display: inline-block; /* needed to center the list items */
}

.tabbable{
     text-align: center; /* center the list items */
}

Bootply

Answer 2

请试试这个：

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  font-weight: bold;
  border-bottom: 3px solid #e9a39c;
}

Answer 3

将此广告提交给您的CSS。更新了bootply

ul.nav-tabs li a:hover{
  border-color: transparent;
  background-color: transparent;
  margin-bottom: -3px;
  border-bottom: 3px solid green;

}

ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover, ul.nav-tabs li.active a:focus, ul.nav-tabs li.active a:active{
  border-color: transparent;
  margin-bottom: -3px;
  border-bottom: 3px solid green;
}

Answer 4

我将float: left更改为display:inline-block和vertical-align:bottom以使li符合底部边框。

我已经做出了你想要的改变：

.nav-tabs>li{
    vertical-align: bottom;
    display: inline-block;
    float: none;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    border: none;
    border-bottom: 3px solid #e9a39c;
    font-weight:bold;
    background: transparent;
}

Here's the fiddle

用下划线代替bootstrap药丸

4 个答案: