如何将 <li> 元素放在汉堡图标下方？答案

【问题标题】：How to put <li> element below hamburger icon?如何将 <li> 元素放在汉堡图标下方？
【发布时间】：2017-01-04 20:33:02
【问题描述】：

您如何在移动模式下的 Bootstrap 4 中将列表元素“主页”放在汉堡包图标和徽标下方？我尝试将 Logo 显示为 style="display: block" 但没有成功。

<div class="container">
  <nav class="navbar navbar-light bg-faded">
    <button class="navbar-toggler hidden-sm-up float-xs-left" type="button" 
    data-toggle="collapse" data-target="#navbar-header"     
    aria-controls="navbar-header" 
    aria-expanded="false" aria-label="Toggle navigation"></button>
    <a class="navbar-brand hidden-md-up" href="/">Logo</a>
    <div class="collapse navbar-toggleable-xs" id="navbar-header">
      <ul class="nav navbar-nav">
        <a class="navbar-brand hidden-sm-down" href="/">Logo</a>
        <li class="nav-item {% block navhome %}{% endblock %}">
          <a class="nav-link float-left" href="/">Home <span 
           class="sr-only">(current)</span></a>
        </li>

【问题讨论】：

看到这个答案stackoverflow.com/questions/41399478/…

标签： twitter-bootstrap css bootstrap-4 twitter-bootstrap-4

【解决方案1】：

如果您希望它垂直堆叠（就像在 3.x 中所做的那样），您必须为 Bootstrap 4 添加一些额外的 CSS。

@media(max-width:576px) {
    .navbar .navbar-nav>.nav-item {
        float: none;
        margin-left: .1rem;
    }
    .navbar .navbar-nav {
        float:none !important;
    }
    .navbar .collapse.in, .navbar .collapsing  {
        clear:both;
    }
}

http://www.codeply.com/go/JyrJRy93P7

另外，在this anwser 中解释。

【讨论】：