Question

<div class="clearfix">    
   <button class="navbar-toggler hidden-sm-up" type="button" data-   
    toggle="collapse" data-target="#exCollapsingNavbar2"> &#9776;
   </button>
   <a class="navbar-brand hidden-sm-up" href="/">Bootstrap</a>
</div>

或

<div class="clearfix">    
   <a class="navbar-brand hidden-sm-up" href="/">Bootstrap</a>
   <button class="navbar-toggler hidden-sm-up" type="button" data-   
    toggle="collapse" data-target="#exCollapsingNavbar2"> &#9776;
   </button>
</div>

在汉堡包图标前输出Bootstrap。我怎样才能将汉堡包放在bootstrap navbar-brand之前并将其推向右边？

Answer 1

如果您想要右侧的图标，请使用按钮中的右拉类，并将其放在代码中的链接之前。

<div class="clearfix">    
   <button class="navbar-toggler hidden-sm-up pull-right" type="button" data-   
    toggle="collapse" data-target="#exCollapsingNavbar2"> &#9776;
   </button>
   <a class="navbar-brand hidden-sm-up" href="/">Bootstrap</a>
</div>

如果你想要左边的图标 - 在链接中有右拉。

        <div class="clearfix">    
   <button class="navbar-toggler hidden-sm-up " type="button" data-   
    toggle="collapse" data-target="#exCollapsingNavbar2"> &#9776;
   </button>
   <a class="navbar-brand hidden-sm-up pull-right" href="/">Bootstrap</a>
</div>

Answer 2

喜欢这个？

See this fiddle

<div class="clearfix pull-right">    
   <button class="pull-left navbar-toggler hidden-sm-up" type="button" data-   
    toggle="collapse" data-target="#exCollapsingNavbar2"> &#9776;
   </button>
   <a class="navbar-brand hidden-sm-up" href="/">Bootstrap</a>
</div>

Navbar品牌和汉堡包图标安排

2 个答案: