我已经将我的导航栏导航链接构建为向右拉(这是我想要的)但是在折叠时链接也向右拉,看起来很奇怪(见图).我想弄清楚如何修改代码,以便在折叠时向左拉导航. Demo 如果你能提供帮助,请
如果你能提供帮助,请告诉我.
我的模板代码和特定于站点的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]
我终于想通了 – 应该是.navbar-right而不是.pull-right！希望这有助于将来的人！