Bootstrap 导航栏中的链接表现不同

Question

我正在使用 Bootstrap 制作导航栏，可以看到 here

除 'Save and exit' link 外，所有 link 的行为方式相同。我该怎么做才能使 'Save and Exit' 看起来一样？不知道为什么它本来应该像其他 link 一样是灰色的，却一直是蓝色的？

下面包含代码。

HAML:

%nav.navbar.navbar-fixed-top.navbar-dark.bg-inverse

  = link_to image_tag("logo-builder.png"), root_path

  %ul.nav.navbar-nav.pull-xs-right

    %li.nav-item
      %button.btn.btn-link{type: 'button', 'data-toggle' => 'modal', 
      'data-target' => '#explainQuestionModal'}
        Explain Question

      %button.btn.btn-link
        Preview

      %button.btn.btn-link
        = link_to 'Save and exit', root_path

= render 'explain_question_modal'

HTML:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  <%= link_to image_tag("logo-builder.png"), root_path %>
  <ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
      <button class="btn btn-link" data-target="#explainQuestionModal" data-toggle="modal" type="button">
        Explain Question
      </button>
      <button class="btn btn-link">
        Preview
      </button>
      <button class="btn btn-link">
        <%= link_to 'Save and exit', root_path %>
      </button>
    </li>
  </ul>
</nav>
<%= render 'explain_question_modal' %>

CSS:

.btn-link {
  color:grey !important;
  font-size:0.9em;
}

.btn-link:hover {
  color:white;
}

.btn-link:focus {
  color:white;
}

Answer 1

因为您正在使用 class .btn-link 设置 button 的样式，但是 "save and exit" 有一个 a link 作为button 的子项，它包装文本 "Save and Exit"

因此您需要添加 .btn-link a {color:grey} 以将 color 应用于 link

注意：我修复了 :hover 以与 a 一起使用

片段

.btn-link {
  color: grey;
  font-size: 0.9em;
}
/*added*/

.btn-link a {
  color: grey;
  text-decoration:none;
  display:block
}
.btn-link:hover, .btn-link:hover a {
  color:white;
}
.btn-link:focus, .btn-link:focus a {
  color:white;
}

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  <a href="#">
    <img src="//lorempixel.com/100/100" />
  </a>
  <ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
      <button class="btn btn-link" data-target="#explainQuestionModal" data-toggle="modal" type="button">
        Explain Question
      </button>
      <button class="btn btn-link">
        Preview
      </button>
      <button class="btn btn-link">
        <a href="#">Save and exit</a>
      </button>
    </li>
  </ul>
</nav>

Answer 2

作为替代方案，您不一定必须使用 buttons，您可以只使用 a 标签来简化。

工作示例片段

.nav-item .nav-link {
  color: grey;
  outline: none;
}
.nav-item .nav-link:hover,
.nav-item .nav-link:focus {
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
      <a class="nav-link" data-toggle="modal" href="#explainQuestionModal">Explain Question</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/">Preview</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/">Save and Edit</a>
    </li>
  </ul>
</nav>
<div class="modal fade" id="explainQuestionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Title</h4>
      </div>
      <div class="modal-body">
        Body
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

HAML 示例

%nav.navbar.navbar-fixed-top.navbar-dark.bg-inverse
  %a.navbar-brand{:href => "#"} Brand
  %ul.nav.navbar-nav.pull-xs-right
    %li.nav-item
      %a.nav-link{'data-toggle' => 'modal', 'data-target' => '#explainQuestionModal'}
        Explain Question
    %li.nav-item
      %a.nav-link{:href => "/preview"}
        Preview
    %li.nav-item
      %a.nav-link{:href => "/save"}
        Save and Edit

.modal.fade#explainQuestionModal(tabindex="-1" role="dialog" aria-labelledby="explainQuestionModal" aria-hidden="true")
  .modal-dialog(role="document")
    .modal-content
      .modal-header
        %button.close(type="button" data-dismiss="modal" aria-label="Close")
          %span(aria-hidden="true") &times;
        %h4.modal-title#explainQuestionModal Title
      .modal-body
        %p Body
      .modal-footer
        %button.btn.btn-secondary(type="button" data-dismiss="modal") Close
        %button.btn.btn-primary(type="button") Save changes

Bootstrap 导航栏中的链接表现不同

Links in Bootstrap navbar behave differently

html

css

twitter-bootstrap

haml

片段