Bootstrap 4导航栏菜单（移动端）的样式如何与Bootstrap 3相似？

Question

Bootstrap 4导航栏菜单（移动端）的样式如何与Bootstrap 3相似？

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

3

Bootstrap 4示例

Bootstrap 3示例

如何获得类似于 Bootstrap 3 的 Bootstrap 4 菜单？

此代码来自 Bootstrap 4 http://v4-alpha.getbootstrap.com/examples/navbar/：

<div class="container">
      <nav class="navbar navbar-light bg-faded">
        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
          &#9776;
        </button>
        <div class="collapse navbar-toggleable-xs" id="navbar-header">
          <a class="navbar-brand" href="#">Navbar</a>
          <ul class="nav navbar-nav">
            <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="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
          </ul>
          <form class="form-inline pull-xs-right">
            <input class="form-control" type="text" placeholder="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </nav> <!-- /navbar -->
</div><!-- /container -->

- Andrey K.

请提供您的代码。 - Yash Jain

这是来自Bootstrap示例的内容链接。 - Andrey K.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steve K · Accepted Answer

您需要在Bootstrap 4中添加一些CSS样式，我想他们这样做是因为你可以在不同的大小上切换菜单，所以您需要添加媒体查询到您希望菜单打开的尺寸。类似于以下内容：

这里有一个用于Bootstrap 4导航栏的自定义样式的fiddle链接：Bootstrap 4 Navbar Fiddle。

@media(max-width:33.9em) {
  .navbar .collapse {max-height:250px;width:100%;overflow-y:auto;overflow-x:hidden;}
  .navbar .navbar-brand {float:none;display: inline-block;}
  .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
  .navbar .navbar-nav {float:none !important;}
  .nav-item{width:100%;text-align:left;}
  .navbar .collapse .dropdown-menu {
    position: relative;
    float: none;
    background:none;
    border:none;
  }
}