Question

实际上，我们要执行的操作很普遍：导航栏在左侧带有品牌徽标，在最右侧是一组图标（例如购物车）。当然，菜单项应该在大屏幕的中间。

笔记本电脑简介：

徽标>>>菜单项>>>购物卡

对于移动设备：

汉堡包图标>>>徽标>>>购物卡

到目前为止，我们能做的最好的是：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
          integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 

<nav class="navbar flex-row-reverse navbar-toggleable-md navbar-light bg-faded">
  
  <span><i class="fas fa-shopping-cart"></i></span>
  
   <a class="navbar-brand" href="#">LogoHERE</a>
   
     <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
   
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-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">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

在fone上看起来还可以，但在笔记本电脑上却没问题。...

更新：答案可以在Bootstrap 4 Navbar keep section on right even when toggled处找到。

Bootstrap 4-导航栏：与品牌和导航栏相同的按钮/文本/图标

0 个答案: