Bootstrap 导航栏宽度与容器相同 [英] Bootstrap Navbar width same as container

问题描述

我正在使用 Bootstrap 3.我不能给导航栏与容器相同的宽度.如果它适用于大屏幕但不适用于其他屏幕尺寸.如何制作固定大小的导航栏，以更改与容器具有相同宽度的不同屏幕.

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"><div class="容器"><div class="navbar-header"><!-- --><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"><span class="sr-only">切换导航</span><span class="glyphicon glyphicon-arrow-down">菜单</span>
<div class="collapse navbar-collapse" id="collapse"><ul class="nav navbar-nav"><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">课程列表</a></li><li><a href="#">联系我们</a></li></div><!--结束折叠-->

</nav><!--结束导航栏-->

解决方案

我要解决的问题是简单地将 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">切换导航</span><span class="glyphicon glyphicon-arrow-down">菜单</span>

<div class="collapse navbar-collapse" id="collapse"><ul class="nav navbar-nav"><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">课程列表</a></li><li><a href="#">联系我们</a></li></div><!--结束折叠-->

</nav>

此外，将 <nav> 包裹在 <div class="row"> 中也不是必需的，我希望这就是你的样子寻找.

I am using Bootstrap 3 . i can't give the navbar same width with the container. if it works in large screen but don't work in other screen size. How can i make a fixed size of my navbar which will change different screen with the same width as container has.

<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>

解决方案

The fix I would make to this is to simply put the container class in the <nav class="..."> this will constrain your nave bar to be the width specified by the container attribute.

Code below:

<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>

Also it is not nessicary for the <nav> to be wrapped in a <div class="row"> I hope this is what you were looking for.

这篇关于Bootstrap 导航栏宽度与容器相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！