Html boostrtap中的水平选项卡

我在bootstrap中使用了一些用于自定义垂直选项卡的代码，我试图使它们水平，并在每个选项卡下面显示文本，但我不能确切地理解如何进行

<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>

标签








表1
同侧眼线

表2
同侧眼线

表3
同侧眼线

我不会发布CSS，因为会很长，我会发布JSFIDLE

---

为了更清楚，我已经说过了。有人能告诉我这将如何发展吗。我的意思是

选项卡1

，

选项卡2

和

选项卡3

。

你可以按以下方式尝试，我刚刚编辑了你下面的课程，效果很好！ 您应该始终给出style

float:left和
显示：继承一起做魔术：）

从
.nav tabs
父项中删除
.col md
类，并将其替换为
.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;
}

在
中。主选项卡列表li
将css从
浮动更改为：无到<代码>浮动：左侧。这就是你想要的吗？@SujataChanda，谢谢你的回答，但它仍然在左边，垂直而不是水平。它仍然在左边垂直。。当前在左侧是垂直的，它旁边的文本在右侧。我不知道为什么不能将它复制到JSFIDLE中。但主要的一点是我想要在文本上方的选项卡，即水平。
.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;
}