Question

我正在使用Bootstrap3 <nav>，在示例代码中，团队使用navbar-toggle collapsed类在小屏幕上折叠导航栏中的元素。

我的问题是如何在折叠时更改它们的顺序？我做了一个简短的片段：

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-default">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false">
      <span class="sr-only">Options</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <ul class="nav navbar-nav collapse navbar-collapse">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>

    <div class="navbar-header">
      <a class="navbar-brand" href="#">
      <img alt="BRAND" src="some/img.png">
      </a>
    </div>


    <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </nav>
</body>
</html>

为了澄清，在我的<nav>中，从左到右有一个列表，一个图像，另一个列表。当它们在小屏幕上折叠时，顺序将从上到下，列表，图像和列表。折叠后如何将图像置于顶部？

Answer 1

最简单的方法是创建品牌html两次，并在xs上显示一个，在xs上隐藏另一个。

您可以通过将visible-xs和hidden-xs类添加到要在折叠导航栏时显示或隐藏的容器来执行此操作。

通过这样做，您可以在两个地方显示品牌形象，而无需添加任何JavaScript。

的 CodePen Demo

＆＃13;
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <nav class="navbar navbar-default"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false"> <span class="sr-only">Options</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul class="nav navbar-nav collapse navbar-collapse"> <li class="dropdown"> <div class="navbar-header visible-xs"> <a class="navbar-brand" href="#"> <img alt="BRAND" src="some/img.png" /> </a> </div> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-bars" aria-hidden="true"></i> <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">LINK1</a></li> <li><a href="#">LINK2</a></li> </ul> </li> </ul> <div class="navbar-header hidden-xs"> <a class="navbar-brand" href="#"> <img alt="BRAND" src="some/img.png" /> </a> </div> <ul class="nav navbar-nav navbar-right collapse navbar-collapse"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hi! User<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#"> Profile</a></li> <li><a href="#"> Feedback</a></li> <li role="separator" class="divider"></li> <li><a href="#"> Log Out</a></li> </ul> </li> </ul> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
＆＃13;
＆＃13;
＆＃13;

在Bootstrap3中，如何更改导航栏中折叠元素的顺序？

1 个答案: