Question

在移动版本中，我需要在一行中包含徽标和导航栏，但导航栏内容太小（文本在两行中，一行会更好）。我能做些什么来增加100％的宽度吗？

我在这里创建了jsfiddle http://jsfiddle.net/8ayj7o36/

  <div class="row">
    <div class="col-xs-8 col-sm-8 col-md-3">
        <a href="#" class="logo"><img src="../img/logo.png" alt="" class="" /></a>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-9">

  <!-- Static navbar -->
  <div class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Link dfa dfa dfdf</a></li>
        <li><a href="#">Link bbbb bbb bb</a></li>  
      </ul>
    </div><!--/.nav-collapse -->
  </div>
 </div>
  </div>

感谢您的帮助！

Answer 1

将与您的徽标对应的<a>标记放在navbar-header中，以便所有内容都以单行显示。现在，您可以根据自己的要求调整col-group。这是您修改后的Fiddle

<div class="navbar-header">
<a href="#" class="logo"><img src="../img/logo.png" alt="logo" class="" /></a>
-
-
-
</div>

Twitter Bootstrap - 与其他元素一起排列的导航栏宽度

1 个答案: