引导导航栏元素在中心过多答案

【问题标题】：bootstrap navbar elements too much in the center引导导航栏元素在中心过多
【发布时间】：2016-11-12 19:43:52
【问题描述】：

我正在使用 bootstrap 为我的页面构建导航栏，但我发现元素过于集中在中心，在侧面留下了很多额外的空间。有没有办法扩展这些以利用页面的额外宽度？

这是我的 HTML/CSS。基本上取自https://codepen.io/bootstrapped/pen/KwYGwq?editors=1100的例6

HTML：

  <nav class="navbar navbar-inverse navbar-fixed-top example6">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand text-hide" href="/fedhr/Fed_Splash_New.do"/>
      </div>
      <div id="navbar6" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="/fedhr/Fed_Splash_New.do"><span class="glyphicon glyphicon-home"></span></a></li>

          <li><a href="#Profile"><span class="glyphicon glyphicon-user"></span>$[SP] <g:no_escape>${jvar_user_name}</g:no_escape> <g:no_escape>${jvar_user_lastname}</g:no_escape></a></li>
          <li><a href="#Tasks"><span class="glyphicon glyphicon-list-alt"></span>$[SP] Tasks</a></li>
          <li><a href="#About"><span class="glyphicon glyphicon-plane"></span>$[SP] About Us</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-phone-alt"></span>$[SP] Contact Us <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="mailto:someone@example.com?Subject=Hello%20again">Email Us</a></li>
              <li><a href="/$chat_support.do?queueID=cd846e1747a102009eaff6df1d9a7175" target="_blank">Chat with HR</a></li>
            </ul>
          </li>
            <li><a href="../logout.do"><span class="glyphicon glyphicon-log-out"></span>$[SP] Logout</a></li>
        </ul>
      </div>
     </div>
  </nav>

CSS：

.example6 .navbar-brand{ 
  background: url(#) center / contain no-repeat;
  width: 200px;
}

【问题讨论】：

能否也分享一下代码？
你把栏包在“容器”类中了吗？

标签： html css twitter-bootstrap navbar

【解决方案1】：

<div class="container"> 将内部内容的宽度设置为取决于视口宽度的固定宽度（请参阅http://getbootstrap.com/css/#overview-container）。要让内容拉伸到最大可用宽度，请将其更改为 <div class="container-fluid">

【讨论】：

【解决方案2】：

使用<div class="container-fluid">，而不是<div class="container">。

这样它将适应视口的可用宽度。

更多信息： Container-fluid vs .container

【讨论】：

【解决方案3】：

这是因为“.container”类在两边都增加了边距。而是在 html 的第 2 行使用“.container-fluid”类

  <div class="container-fluid">

我想你是在高分辨率显示器上观看的。

【讨论】：

【解决方案4】：

您可以在 .navbar-right 类中使用属性 margin-right。但请注意，您的<ul> 会溢出容器父类。

.navbar-right {
    float: right!important;
    margin-right: -20px;
}

【讨论】：