Горизонтальные вкладки в boostrtap

Question

У меня есть код для пользовательских вертикальных вкладок в бутстрапе, и я пытаюсь сделать их горизонтальными и текстовыми под каждой вкладкой, но я не могу точно понять, как именно.

<section id="about"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12 col-sm-12 col-xs-12"> 
      <div class="feature_header text-center"> 
       <h3 class="feature_title"><b>Tabs</b></h3>      
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="feature-tab"> 
      <div class="col-md-2 col-sm-3 col-xs-12"> 
       <ul class="nav nav-tabs main-tab-list text-center" role="tablist"> 
         <li role="presentation" class="active"> 
         <a href="#home" role="tab" data-toggle="tab" > 
          <div class="single-tab"> 
           <div class="f-icon"> 
            <i class="fa fa-laptop"></i> 
           </div> 
          </div> 
          <h4>Tab 1</h4> 
         </a> 
         </li> 
         <li role="presentation" > 
         <a href="#profile" role="tab" data-toggle="tab"> 
          <div class="single-tab"> 
           <div class="f-icon"> 
            <i class="fa fa-send"></i> 
           </div> 
          </div> 
          <h4>Tab 2</h4> 
         </a> 
         </li> 
         <li role="presentation" > 
         <a href="#messages" role="tab" data-toggle="tab"> 
          <div class="single-tab"> 
           <div class="f-icon"> 
            <i class="fa fa-heart"></i> 
           </div> 
          </div> 
          <h4>Tab 3</h4> 
         </a> 
         </li> 
       </ul> 
      </div> <!-- col-md-12 end --> 
      <div class="col-md-10 col-sm-9 col-xs-12"> 
       <div class="tab-content main-tab-content"> 
         <div role="tabpanel" class="tab-pane active " id="home"> 

          <div class="col-md-12 col-sm-9"> 
           <div class="c-tab"> 
            <h4>Tab 1</h4> 
            <p>Lorem ipsum.... </p> 
            <a href="#"> More</a> 
           </div> 
          </div> 

         </div> 
         <div role="tabpanel" class="tab-pane active " id="home"> 

          <div class="col-md-12 col-sm-9"> 
           <div class="c-tab"> 
            <h4>Tab 2</h4> 
            <p>Lorem ipsum.... </p> 
            <a href="#"> More</a> 
           </div> 
          </div> 

         </div> 
         <div role="tabpanel" class="tab-pane active " id="home"> 

          <div class="col-md-12 col-sm-9"> 
           <div class="c-tab"> 
            <h4>Tab 3</h4> 
            <p>Lorem ipsum.... </p> 
            <a href="#"> More</a> 
           </div> 
          </div>         
         </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</section> 

Я не буду писать CSS, потому что будет очень долго, а я отправлю JsFiddle.

Для более ясных я сделал это Jsfiddle. Может кто-нибудь сказать, как это будет идти горизонтально. Я имею в виду Tab 1, Tab 2 и Tab 3 ..

Answer 1

удалить .col-md класс от .nav-tabs родителя и заменить его .row класса, и ваш `` должны быть:

.main-tab-list li{ 
    position: relative; 
    display: inline-block; 
    float: left; /* or none */ 

    padding: 10px 0px 10px; 
    border: 1px solid#eee; 
    width: 150px; 
    /*background: #FBFBFB;*/ 
    margin-bottom: 5px; 
    border-radius: 5px; 
} 

http://jsfiddle.net/yt21wup5/

Answer 2

Вы можете попробовать, как показано ниже, я только что отредактировал ваш ниже класс, и он работает! вы всегда должны дать стиль float: left; и display: inherit; вместе, чтобы сделать волшебство :)

.main-tab-list li{ 
padding: 10px 0px 10px; 
border: 1px solid#eee; 
width: 150px; 
/* background: #FBFBFB; */ 
float: left; 
margin-bottom: 5px; 
border-radius: 5px; 
display: inherit; 
margin-right: 5px; 
}