Question

我使用Bootstrap 3创建了一个导航标签，并且只想设置一个标签的样式。不是有效标签或无效标签；我有一个选项卡，将“ 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;
}

Answer 1

要覆盖默认值，bootstrap将在它们的元素上使用：

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>

Answer 2

所以我想在这里要考虑几件事。解决此问题的合适方法是，使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导航选项卡中仅设置一个选项卡的样式

2 个答案: