Question

我正在尝试添加

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
		<div class="container">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">Mean Office</a>
			</div>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="" title="">Other contacts</a></li>
				<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
			</ul>
		</div>
	</nav>
  </div>

在上面的例子中，我的Logout按钮正在导航栏之外。这有什么不对？如何解决这个问题？

Answer 1

您正在.container class旁边使用导航栏，并且在container class之后再次使用相同的.navbar class，因为BOOTSTRAP容器类具有固定宽度1140px + 30px填充的大视图，因此您的导航栏溢出它父容器。

[body > .container > .navbar > .container]

要解决此问题，您必须首先删除.container并将<nav class='navbar'>直接放入正文标记，然后将容器或容器流体放入导航栏内。

更改为[body > .navbar > .container OR .container-fluid]

还有一个要说的话

[练习完美]

Answer 2

它不会出现在导航栏之外。你已经嵌套了两个容器。 container中的填充在此处起作用。

<div class="container">
<nav class="navbar navbar-default">
        <div class="container">

引导程序中的

container宽度为1170px padding-right:15px , padding-left:15px。（我在屏幕重新设置中查看它> 1200px）。您的导航栏总空间为1140px现在（1170px - 30px = 1140px）具有背景颜色属性。当你再次添加一个容器时，它现在占用1170px的空间，超过了1140px。因此，在两侧，增加了额外的15px白色空间。而且，嵌套的“navbar-right”具有“margin-right:-15px”，可以进一步推动nav。

简单地构建这种方式：

<div class="container">
  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Mean Office</a>
    </div>
    <div>
      <ul class="nav navbar-nav navbar-right ">
        <li><a href="" title="">Other contacts</a></li>
        <li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
      </ul>
    </div>
  </nav>
</div>

Answer 3

这就是引导导航栏的制作方式：

Navbar没有container包裹它，但里面有container-fluid：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Mean Office</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="" title="">Other contacts</a>
      </li>
      <li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

P.S。：查看整页结果以便更好地观看

Bootstrap右侧navibar凌乱如何解决这个问题？

3 个答案: