CSS 默认显示Bootstrap的汉堡菜单，放在左边

Display Bootstrap's hamburger menu by default and place it on the left side

提问by kirdua

How might I display Bootstrap's collapsed, aka "Hamburger", menu by default but to have it on the left side of the browser?

默认情况下，我如何显示 Bootstrap 的折叠菜单，也就是“汉堡包”菜单，但要将其显示在浏览器的左侧？

I'm guessing that on the collapsed menu, I just change it to be as below?

我猜在折叠菜单上，我只是将其更改为如下所示？

<!-- the collapsing menu -->
    <div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->

回答by Martin

If you want to create a navbar with a three line "hamburger" on mobile devices, just follow the official Bootstrap template. If you want to move the button to the left, just add a float: left to the css or use the class "pull-left" on the button. Do note that you will need to add some margin: left to make sure there's some spacing between the button and the left border.

如果你想在移动设备上创建一个带有三行“汉堡包”的导航栏，只需遵循官方的Bootstrap 模板。如果要将按钮向左移动，只需在 css 中添加一个 float: left 或在按钮上使用“pull-left”类。请注意，您需要添加一些 margin: left 以确保按钮和左边框之间有一些间距。

Bootply example here

Bootply 示例在这里

回答by Louie

• as martin mentioned you need a pull-left attribute for the hamburger to be on the left
• with the code below the left hamburger only shows up when the screen is too small to show all the nav bar items

• 正如马丁提到的，你需要一个 pull-left 属性让汉堡在左边
• 左侧汉堡包下方的代码仅在屏幕太小而无法显示所有导航栏项目时显示

nav class="navbar navbar-inverse">   <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed pull-left" 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" href="/">Slide Show</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Home</a></li>
        <li><a href="/shutdown">Shutdown</a></li> 
        <li><a href="/about">About</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>   </div> </nav>

nav class="navbar navbar-inverse">   <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed pull-left" 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" href="/">Slide Show</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Home</a></li>
        <li><a href="/shutdown">Shutdown</a></li> 
        <li><a href="/about">About</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>   </div> </nav>