防止折叠的Bootstrap Nav包装品牌?

时间:2014-09-09 03:28:14

标签: css ruby-on-rails twitter-bootstrap-3 nav

我的问题很简单。我会发布一张图片,但我没有足够的代表。在超小屏幕上,独立于品牌大小或媒体查询,导航栏(折叠)将包裹品牌并在屏幕上形成另一个可见行。

使用Bootstrap 3和Rails 4.这是我的导航栏部分:

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <div class="container-fluid">
        <a class="navbar-brand brandup" href="/">
          <img class="img-responsive" src="/images/Skillsesh_Horizontal.png" style="height: 40px;" />
        </a>
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <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>
    <div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </div>
  </div>
</nav>

0 个答案:

没有答案