Bootstrap - 流畅的导航栏项目

Question

我是新手bootstrap用户，目前我想创建一个流畅的导航栏，但是当我缩小浏览器时，导航栏变得很奇怪。

收缩前：

进一步缩小后：

如您所见，第二张图片非常糟糕。我认为一种可能的方法是将单词分成两行（例如第 1 行 - goto，第 2 行 - Hello_World!）。谁能给我一个更好的方法来解决这个问题？提前致谢。

当前HTML代码：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand logo-container" href="#"><img class="logo" alt="Logo" src="images/test.png" /></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="code">goto </span><span class="section-name">Hello_World!</span></a></li>
        <li><a href="#"><span class="code">goto </span><span class="section-name">About_Me</span></a></li>
        <li><a href="#"><span class="code">goto </span><span class="section-name">Life_Graph</span></a></li>
        <li><a href="#"><span class="code">goto </span><span class="section-name">Skill_Trees</span></a></li>
        <li><a href="#"><span class="code">goto </span><span class="section-name">Feat_Stacks</span></a></li>
        <li><a href="#"><span class="code">goto </span><span class="section-name">Codetact_Me</span></a></li>
      </ul>
    </div>
  </div>
</nav>

这是我的 FIDDLE...

Answer 1

如果我对您的问题的理解是正确的，您可以使用 .row & .col 将菜单阻止到新行

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="row">
      <div class="navbar-header col-sm-1">
        ...
      </div>
      <div class="col-sm-11">
        <div class="collapse navbar-collapse" id="myNavbar">
          ...
        </div>
      </div>
    </div>
  </div>
</nav>

您可以更改 col-md-xx 以使其更宽或更小

了解更多信息 http://getbootstrap.com/css/#grid

Bootstrap - 流畅的导航栏项目

Bootstrap - Fluid navbar items

css

twitter-bootstrap

twitter-bootstrap-3