Question

我正在使用Bootstrap 3。我不能给导航栏带有与容器相同的宽度。如果它在大屏幕上工作，但不适用于其他屏幕尺寸。如何制作一个固定尺寸的导航栏，它将改变与容器宽度相同的不同屏幕。

<div class="row"><!--Start row-->
     <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container">
                <div class="navbar-header"><!-- -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="glyphicon glyphicon-arrow-down">Menu</span>
                    </button>

                </div>
                <div class="collapse navbar-collapse" id="collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Course List</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div><!--End Collapse-->
         </div>
     </nav><!--End Navbar-->
</div>

Answer 1

我要做的修复是简单地将container类放在<nav class="...">中，这会将您的中心栏限制为container属性指定的宽度。

以下代码：

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top container" role="navigation">
         <div class="container-fluid">
                <div class="navbar-header"><!-- -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="glyphicon glyphicon-arrow-down">Menu</span>
                    </button>

                </div>
                <div class="collapse navbar-collapse" id="collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Course List</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div><!--End Collapse-->
         </div>
     </nav>

将<nav>包裹在<div class="row">中也不是必要的。我希望这就是你要找的东西。

Answer 2

只需将类容器 - 流体转换为容器，即可完成。为我工作......

Answer 3

你忘记了一个行类（第2行）

＆＃13;

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top container" role="navigation">
  <div class="row">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="glyphicon glyphicon-arrow-down">Menu</span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">title</a>
          </li>
          <li><a href="#">title</a>
          </li>
          <li><a href="#">title</a>
          </li>
          <li><a href="#">title</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

＆＃13;

Bootstrap Navbar宽度与容器相同

3 个答案: