以下 html 代码包含一个 Bootstrap 选项卡控件。在我的示例中，我有一些嵌套的 Bootstrap 选项卡控件。第一个(最左边)选项卡包含一个嵌套的选项卡控件，其中包含 3 个水平选项卡。第二个选项卡包含一个带有 3 个垂直对齐选项卡的嵌套选项卡控件。第三和第四个选项卡只包含纯文本内容。我遇到的问题是，对于水平选项卡(嵌套和未嵌套)，文本内容显示在与选项卡(水平对齐的选项卡)相同的级别 - 文本环绕选项卡。我想显示水平对齐选项卡的内容“下方”相应选项卡不环绕选项卡。实现此目的的 CSS 是什么？
<html>
<head>
<title></title>
<link rel="stylesheet prefetch" href="bootstrap.min.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<style type="text/css">
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
.tabs-left > .nav-tabs > li {
float: none;
}
.tabbable > .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
.tabbable > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}
.tabbable > .nav-tabs > li > a {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.tabbable > .nav-tabs .active > a,
.tabbable > .nav-tabs .active > a:hover,
.tabbable > .nav-tabs .active > a:focus {
border-color: red blue red red;
*border-right-color: lime;
background-color: lime;
}
.tabbable > .nav > li > a:hover {
background-color: red;
}
.tabbable > .nav > li > a {
background-color: orange;
}
.tab-content {
color: red;
}
</style>
</head>
<body>
<form>
<div class="container">
<div class="col-md-6">
<h3>Tabs</h3>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#one" data-toggle="tab"><b>OneA abcdefg</b></a></li>
<li><a href="#two" data-toggle="tab"><b>TwoA</b></a></li>
<li><a href="#twee" data-toggle="tab"><b>ThreeA</b></a></li>
<li><a href="#fourth" data-toggle="tab"><b>fourthA</b></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one">
<div class="tabbable tabs-top">
<ul class="nav nav-tabs">
<li><a href="#oneb" data-toggle="tab"><b>OneB</b></a></li>
<li class="active"><a href="#twob" data-toggle="tab"><b>TwoB</b></a></li>
<li><a href="#tweeb" data-toggle="tab"><b>ThreeB</b></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="oneb">First Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div>
<div class="tab-pane active" id="twob">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
<div class="tab-pane" id="tweeb">Third amuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div>
</div>
</div>
<!-- ------------------- -->
<div class="tab-pane" id="two">
<div class="col-md-7">
<!-- tabs left -->
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li><a href="#a" data-toggle="tab"><b>One</b></a></li>
<li class="active"><a href="#b" data-toggle="tab"><b>Two</b></a></li>
<li><a href="#c" data-toggle="tab"><b>Twee</b></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="a">A) Lorem ipsum dolor sit amet, charetra varius </div>
<div class="tab-pane active" id="b">B) Secondo sed ac orci quis tortor imperdiet</div>
<div class="tab-pane" id="c">C) Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. molestie tincidunt condimentum vitae. </div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="twee">Third amuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="fourth">fourth amuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div>
</div>
<!-- /tabs -->
</div>
</div>
</form
最佳答案
我通过在相应选项卡(内联
s)中每个 div 的文本之前添加一堆
s(如 5)来实现我想要的结果。我认为这是做事的方法。如何使用 CSS 为每个 div 实现相同的效果？
关于html - 将 Bootstrap 选项卡控件(水平选项卡)的文本内容放置在选项卡下的 CSS - 排除选项卡周围的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43857942/