Question

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

除了＆＃39;保存并退出＆＃39;之外，所有链接的行为方式都相同。链接。我该怎么做？保存并退出＆＃39;看起来一样？不知道为什么它会像其他链接那样变成灰色的时候一直是蓝色的？

下面的代码。

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

因为您要为button设置样式.btn-link，但＆＃34;保存并退出＆＃34; 有a link作为该{的{孩子} { {1}}正在包装文本＆＃34;保存并退出＆＃34;

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

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

段

＆＃13;

.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;
}

＆＃13;

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导航栏中的链接表现不同

2 个答案:

段