为什么导航栏不向右伸展？

Question

我有一个带有这样的导航栏的Bootstrap页面：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

	<div class="container-fluid sts-screen-fluid">
		<nav role="navigation" class="navbar-nav navbar-default">
			<div class="container">
				<div class="navbar-header">
					<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<span class="navbar-brand">Kn</span>
				</div>
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav navbar-right">
						<li><a href=#>Log In</a></li>
						<li><a href=#>Sign Up</a></li>
						<li><a href=#>Help</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

你知道，问题是我的Navbar似乎没有一直向右伸展，所以它看起来像这样：

如何让导航栏向右移动？

Answer 1

这是因为container div中有container-fluid div。

Answer 2

可能会将switch (true)更改为var y; switch (true) { case y == "A": y = 10; break; default: } 。

Answer 3

似乎工作得很好here。

<div class="container-fluid sts-screen-fluid">
    <nav role="navigation" class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <span class="navbar-brand">Kn</span>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href=#>Log In</a></li>
                    <li><a href=#>Sign Up</a></li>
                    <li><a href=#>Help</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

Answer 4

您必须在.navbar标记中使用.navbar-nav类而不是<nav>。 .navbar-nav类用于<ul>标记。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid sts-screen-fluid">
    <nav role="navigation" class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <span class="navbar-brand">Kn</span>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href=#>Log In</a></li>
                    <li><a href=#>Sign Up</a></li>
                    <li><a href=#>Help</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 5

根据bootstrap's documentation (Source: w3school)，Currying class应该在.container-fluid内。

.navbar .navbar-inverse

Demo from Bootstrap