在 Twitter Bootstrap 4 中按行排列菜单项答案

【问题标题】：Have menu items in rows in Twitter Bootstrap 4在 Twitter Bootstrap 4 中按行排列菜单项
【发布时间】：2016-08-16 23:55:41
【问题描述】：

我不希望我的菜单有行，而不是在没有剩余空间时总结并中断到下一行。

例子：

现在我有：

更改为display: inline 无效。

<div class="container">


<nav class="navbar navbar-dark bg-inverse">

  <span class="">Menu</span>

  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
    +
  </button>


  <div class="collapse navbar-toggleable-xs" id="collapsingNavbar">

    <ul class="nav navbar-nav os_menu">
      <li class="nav-item active">
        <a class="nav-link" href="#">Watch the Trailer<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Screening & Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Synopsis</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">The Protagonist</a>
      </li>
    </ul>

  </div>
</nav>

</div>

https://jsfiddle.net/clankill3r/gguc1nub/

【问题讨论】：

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

【解决方案1】：

  .nav.navbar-nav .nav-item {
    float: none;
  }
  .nav.navbar-nav .nav-item+.nav-item {
    margin-left: 0;
  }
  .nav.navbar-nav .nav-link {
    padding: .25rem 0;
  }
  .nav.os_menu {
    border-top: 3px solid rgba(255, 255, 255, .5);

  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">


<nav class="navbar navbar-dark bg-inverse">

  <span class="">Menu</span>

  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
    +
  </button>


  <div class="collapse navbar-toggleable-xs" id="collapsingNavbar">

    <ul class="nav navbar-nav os_menu">
      <li class="nav-item active">
        <a class="nav-link" href="#">Watch the Trailer<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Screening & Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Synopsis</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">The Protagonist</a>
      </li>
    </ul>

  </div>
</nav>

</div>

jsFiddle

【讨论】：