【发布时间】：2018-03-16 20:13:32
【问题描述】：
我想在 bootstrap 中创建一个类似于 android 中的 tablayout。
我正在尝试创建这些选项卡，就像他们在此处解释的那样： https://bootsnipp.com/snippets/featured/bootstrap-line-tabs-by-keenthemes
但我想使用引导程序 4.0.0。我的代码在这里： https://jsfiddle.net/3y2wgsao/1/
css:
/***
Bootstrap Line Tabs by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest:
Licensed under MIT
***/
/* Tabs panel */
.tabbable-panel {
border:1px solid #eee;
padding: 10px;
}
/* Default mode */
.tabbable-line > .nav-tabs {
border: none;
margin: 0px;
}
.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 > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
border: 0;
background: none !important;
color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
border-bottom: 4px solid #f3565d;
position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
border: 0;
color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
color: #404040;
}
.tabbable-line > .tab-content {
margin-top: -3px;
background-color: #fff;
border: 0;
border-top: 1px solid #eee;
padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
padding-bottom: 0;
}
html:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="tabbable-panel">
<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 class="tab-content">
<div class="tab-pane active" id="tab_default_1">
<p>
I'm in Tab 1.
</p>
<p>
Duis autem eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
<p>
<a class="btn btn-success" href="" target="_blank">
Learn more...
</a>
</p>
</div>
<div class="tab-pane" id="tab_default_2">
<p>
Howdy, I'm in Tab 2.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
</p>
<p>
<a class="btn btn-warning" href="" target="_blank">
Click for more features...
</a>
</p>
</div>
<div class="tab-pane" id="tab_default_3">
<p>
Howdy, I'm in Tab 3.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
</p>
<p>
<a class="btn btn-info" href="" target="_blank">
Learn more...
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
如您所见，红线并未更改为活动链接。有谁知道为什么会这样？
【问题讨论】：
-
这里有什么问题？
-
我的这个答案：stackoverflow.com/a/48594048/8270343 展示了如何使用方便的代码 sn-p 使其工作。
标签： twitter-bootstrap bootstrap-4