在Bootstrap Nav选项卡中仅选择一个选项卡
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Bootstrap Nav选项卡中仅选择一个选项卡相关的知识，希望对你有一定的参考价值。
我使用Bootstrap 3创建了一个导航选项卡，并且只想设置一个选项卡。不是acive选项卡或非活动选项卡;我有一个单选项卡，我已经应用了“csv-download”类。我想更新此特定选项卡以删除边框并使背景透明。
我这样做的原因是我希望下载链接与其他选项卡正确对齐，并且还要响应较小的屏幕。
以下是我的标签的设置：
<ul class="nav nav-tabs" i>
<li class="active" role="presentation"><a data-toggle="tab" href="#link1">Tab 1</a></li>
<li role="presentation"><a data-toggle="tab" href="#link2">Tab 2</a></li>
<li role="presentation"><a data-toggle="tab" href="#link3">Tab 3</a></li>
<li id="dfw_download" class="csv-download"><a target="_blank"><i class="fa fa-download"></i> Download Data</a></li>
</ul>
以下是我尝试过的单独内容：
.csv-download a {
background-color: transparent;
color: #0277bd;
text-decoration: none;
}
和：
.nav-tabs > li > .csv-download > a {
background-color: transparent;
color: #0277bd;
text-decoration: none;
}
对于覆盖，默认样式引导程序使用它们的元素：
1）您可以在CSS上使用!important（非推荐）句子。
要么
2）创建自己的自定义样式类，并将它们应用于要设置样式的元素。
检查下一个示例：
.csv-download a {
background-color: red !important;
color: black !important;
text-decoration: none !important;
}
.custom-link > a {
background-color: red;
color: black;
text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active" role="presentation">
<a data-toggle="tab" href="#link1">Tab 1</a>
</li>
<li role="presentation">
<a data-toggle="tab" href="#link2">Tab 2</a>
</li>
<li role="presentation">
<a data-toggle="tab" href="#link3">Tab 3</a>
</li>
<li id="dfw_download" class="csv-download">
<a target="_blank"><i class="fa fa-download"></i> Download Data</a>
</li>
<li id="dfw_download" class="csv-download custom-link">
<a target="_blank"><i class="fa fa-download"></i> Download Data</a>
</li>
</ul>
</div>
</nav>所以我想在这里要考虑一些事情。处理此问题的适当方法是简单地具有比引导程序提供的更高的CSS特异性。使这种感觉变得棘手的核心问题是，如果你能提供帮助，你真的不想直接在元素上进行样式设计。 Bootstrap 4 addresses this where they move a majority of their styling to classes i.e. .nav-item所以你可以把更多的课程放在首位。
我强烈建议不要使用!important。并非它是“错误的” - 有时候图书馆具有非常高的特异性风格（ew），有时候迫使他们知道更喜欢你的风格但是如果有其他手段（似乎有），相反，最好这样做。
看看他们的一些old examples from Bootstrap 3，看起来他们的例子试图通过使用子组合器（>）来覆盖某些样式，即.nav > li > a来覆盖样式。
如果Bootstrap 3提供了导入特定样式的方法，那也值得一看？如果有一种方法你只能通过Sass / LESS版本的Bootstrap导入你需要的样式，那也可以选择。
以上是关于在Bootstrap Nav选项卡中仅选择一个选项卡的主要内容，如果未能解决你的问题，请参考以下文章
使用 Bootstrap 4 在主活动选项卡错误中加载选项卡内容 - PHP