Question

我已经将我的导航栏导航链接构建为向右拉（这是我想要的）但是在折叠时链接也向右拉，看起来很奇怪（见图）。我想弄清楚如何修改代码，以便在折叠时向左拉导航。 Demo

Navbar FullScreen - ok

Navbar Collapse

如果您能提供帮助，请与我们联系。

我的模板代码和特定于网站的css如下：

    ![<!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link href="/static/css/site-specific.css" rel="stylesheet">       
  </head>

    <body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-     collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>          
        </div>
        <div class="collapse navbar-collapse pull-right">
          <ul class="nav navbar-nav pull-left">
            <li><a href="{{ url_for('index') }}">Home</a></li>
            <li><a href="{{ url_for('about') }}">About</a></li>                     
            <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Browse by Neighbourhood<span   class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="{{ url_for('notting_hill') }}">Notting Hill</a></li>        
                <li><a href="{{ url_for('marylebone') }}">Marylebone</a></li>
                <li><a href="{{ url_for('west_end') }}">West End</a></li>
                <li><a href="{{ url_for('mayfair') }}">Mayfair</a></li>
                <li><a href="{{ url_for('soho') }}">Soho</a></li>
                <li><a href="{{ url_for('covent_garden') }}">Covent Garden</a></li>
                <li><a href="{{ url_for('chelsea') }}">Chelsea</a></li>
                <li><a href="{{ url_for('camden') }}">Camden</a></li>
                <li><a href="{{ url_for('shoreditch') }}">Shoreditch</a><li>
                <li><a href="{{ url_for('tower_bridge') }}">Tower Bridge</a><li>
                <li><a href="{{ url_for('index') }}">All</a><li>
              </ul>
            </li>
            <li><a href="{{ url_for('contact') }}">Contact</a></li>
          </ul>
        </div><!--.nav-collapse-->
      </div>
    </div>

        <h1>LONDON</h1>  


    {% block content %}{% endblock %}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="/static/js/bootstrap.min.js"></script>
    </body>
 </html>

       .navbar {
        background-color: #33B833;
        font-family: 'Raleway', sans-serif;}

      .navbar .nav > li > a {        
        color: #ffffff;}

      .navbar .nav > li > a:hover {
        color: #000000;}

      .navbar-inverse .navbar-nav > .open >a:hover, .navbar-inverse .navbar-nav > .open >a:focus, .navbar-inverse .navbar-nav > .open >a  {
        background-color: #33CC33;
      }][4]

Answer 1

我终于明白了 - 应该是.navbar-right而不是.pull-right！希望这有助于将来的某个人！

Answer 2

这是你在styles.css中所需要的。试一试。

@media (max-width: 768px) {
  .navbar-collapse {
    float: left;
  }
}

Answer 3

将Pull-right类添加到下拉菜单

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Browse by Neighbourhood<span   class="caret"></span></a>
          <ul class="dropdown-menu pull-right" role="menu">
            <li><a href="{{ url_for('notting_hill') }}">Notting Hill</a></li>        
            <li><a href="{{ url_for('marylebone') }}">Marylebone</a></li>
            <li><a href="{{ url_for('west_end') }}">West End</a></li>
            <li><a href="{{ url_for('mayfair') }}">Mayfair</a></li>
            <li><a href="{{ url_for('soho') }}">Soho</a></li>
            <li><a href="{{ url_for('covent_garden') }}">Covent Garden</a></li>
            <li><a href="{{ url_for('chelsea') }}">Chelsea</a></li>
            <li><a href="{{ url_for('camden') }}">Camden</a></li>
            <li><a href="{{ url_for('shoreditch') }}">Shoreditch</a><li>
            <li><a href="{{ url_for('tower_bridge') }}">Tower Bridge</a><li>
            <li><a href="{{ url_for('index') }}">All</a><li>
          </ul>

Bootstrap导航栏导航向右拉，但在折叠时向左拉

3 个答案: