gpt4 book ai didi

html - Bootstrap 中的水平选项卡

转载 作者:行者123 更新时间:2023-11-28 15:59:41 24 4
gpt4 key购买 nike

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

我不会发布 CSS,因为会很长,我会发布 JsFiddle。

为了更清楚,我做了这个 Jsfiddle .有人能告诉我这将如何发展吗?我的意思是 Tab 1Tab 2Tab 3..

最佳答案

你可以尝试如下,我刚刚编辑了你的下面的类并且它有效!你应该总是给样式 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;
}

关于html - Bootstrap 中的水平选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28578966/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com