Question

我想在导航栏中显示一些菜单项，即使在移动视图中也是如此。因此，它不应包含在导航栏切换下拉菜单中，而是保持可见，就像在桌面视图上一样，在导航栏切换旁边。我需要类似于navbar-brand的行为，即使在移动设备上也能保持可见。这是我目前的代码，但我不知道如何做到这一点：

<nav role="navigation" class="navbar navbar-default">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand">Brand </a>

        </div>

        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"> <a href="#" data-toggle="collapse" data-target="#navbarCollapse">Home</a></li>
                <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Profile</a></li>
                <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Messages</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Login</a></li>
            </ul>
        </div>
    </nav>

感谢任何帮助，谢谢！

Answer 1

我已将此作为小提琴：http://jsfiddle.net/rqv0bavc/

基本上，没有理由你不能在标题中添加另一个div，向左或向右浮动，然后应用一些基本样式：

.secondary-btns {
  float: left;
  height: 50px;
  padding: 15px 15px;
  line-height: 20px;
}

HTML：

<div class="navbar-header">
  <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
  </button>

  <a class="navbar-brand">Brand </a>
  <div class="secondary-btns">
    <a href="#">btn</a>
  </div>
</div>

Answer 2

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav role="navigation" class="navbar navbar-default">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand">Brand </a>

        </div>

        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"> <a href="#" data-toggle="collapse" data-target="#navbarCollapse">Home</a></li>
                <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Profile</a></li>
                <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Messages</a></li>
                <li class="visible-lg" ><a href="#" data-toggle="collapse" data-target="#navbarCollapse">About Us</a></li>
                <li class="visible-lg" ><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Contact Us</a></li>
                
                
                
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Login</a></li>
            </ul>
        </div>
    </nav>

</body>
</html>

＆＃13;

Answer 3

不确定有什么神奇的事情要做。我刚刚测试了

＆lt; a class =“navbar-brand”＆gt;品牌＆lt; / a＆gt;
＆lt; a class =“navbar-brand”＆gt;品牌＆lt; / a＆gt;

而不仅仅是

＆lt; a class =“navbar-brand”＆gt;品牌＆lt; / a＆gt;

它在手机上显示得很好。如果你希望它的尺寸减小，你可以给第二个a-tag一个字体大小110％的字体。

刚刚也按照Kümar的建议对拉力等级进行了测试。 class =“pull-left”将第一个a-tag保持在左边，class =“pull-right”保持第二个将其向右推。

Bootstrap - 在移动设备上添加按钮到导航栏

3 个答案: