2017-10-05 45 views
-1
<div class="nav-menu"> 
    <nav class="navbar navbar-expand-md navbar-light bg-light"> 
     <a class="navbar-brand" href="#">Startup</a> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu" aria-controls="navmenu" aria-expanded="false" 
      aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 

     <div class="collapse navbar-collapse" id="navmenu"> 
      <ul class="navbar-nav ml-auto"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link</a> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
        <div class="dropdown-menu" aria-labelledby="dropdown01"> 
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another action</a> 
         <a class="dropdown-item" href="#">Something else here</a> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</div> 

如何重置触发器的位置,使其位于我的导航栏品牌旁边?我需要使用和css重新定位吗?Navbar拨号器位置

回答

0

添加内置类.navbar-toggler-right或.navbar-toggler-left将切换按钮定位到左侧或右侧。

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navmenu" aria-controls="navmenu" aria-expanded="false" 
      aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
</button> 

任何进一步的自定义将需要自定义的CSS。

+0

不再适用于最新的引导程序了。 我如何使用位置绝对/相对,以便图标在浏览器大小调整时不会移位? –