Bootstrap Lined pills style css

Question

私はこのように見えるNav Pillsを得ようとしています。

bootsnipp.com

私も下に強調するために置きます。私はそれが動作するように感じることはできません。ここで

Answer 1

はあなたが必要とするだけのスタイルではなく、あなたのトグルだけのhrefは

<style type="text/css"> 
    .tabbable-line>.nav-tabs>li { 
    margin-right: 2px 
} 

.tabbable-line>.nav-tabs>li>a { 
    border: 0; 
    margin-right: 0; 
    color: #737373 
} 

.tabbable-line>.nav-tabs>li:hover { 
    border-bottom: 4px solid #fbcdcf 
} 

.tabbable-line>.nav-tabs>li:hover>a { 
    border: 0; 
    background: 0 0!important; 
    color: #333 
} 

.tabbable-line>.nav-tabs>li.active { 
    border-bottom: 4px solid #f3565d; 
    position: relative 
} 

.tabbable-line>.nav-tabs>li.active>a { 
    border: 0; 
    color: #333 
} 
</style> 

       <div class="tabbable-line"> 
        <ul class="nav nav-tabs "> 
         <li class="active"> 
          <a href="#tab_default_1" data-toggle="tab"> 
          Tab 1 </a> 
         </li> 
         <li> 
          <a href="#tab_default_2" data-toggle="tab"> 
          Tab 2 </a> 
         </li> 
         <li> 
          <a href="#tab_default_3" data-toggle="tab"> 
          Tab 3 </a> 
         </li> 
        </ul> 
       </div>