Question

我有一个关于BS4和可折叠菜单对齐的问题。

这是我得到的代码：

<nav class="navbar navbar-light navbar-fixed-top">
  <div class="container">

    <button type="button" class="navbar-toggler hidden-sm-up pull-xs-right"
            data-toggle="collapse" data-target=".nav-content">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Test</a>

    <div class="collapse navbar-toggleable-xs nav-content">
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Leagues</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Basic without

问题是，我希望将菜单项（未折叠时）对齐到右侧和折叠时，向左侧但在汉堡按钮和主导航下方。它与BS 3一起工作正常。

我已经尝试使用float-xs-right，但它仍然无法正常工作。

With float right

亲切的问候，克里斯

Answer 1

根据您使用Bootstrap 4的版本，语法已更改为float - ** - right（请参阅Responsive floats），截至当前的v4.0.0-alpha.5，请参阅此内容在Utilities overhaul下发帖。

另一个问题是当对navbar-toggler按钮使用响应（浮动）实用程序时，列表项将显示在navbar-brand旁边而不是在@media (max-width: 574px) { .navbar-header:after, .navbar-header:before { display: table; content: " " } .navbar-header:after { clear: both } }下方。截至目前，我认为你必须自己处理这个问题，方法是在正确的断点内清除浮动，以便崩溃。

CSS示例：

@media (max-width: 574px) {
  .navbar-header:after,
  .navbar-header:before {
    display: table;
    content: " "
  }
  .navbar-header:after {
    clear: both
  }
}

工作示例：

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">

<nav class="navbar navbar-light navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <a class="navbar-brand" href="#">BRAND</a>

      <button class="navbar-toggler hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"></button>
    </div>

    <div class="collapse navbar-toggleable-xs" id="nav-content">

      <ul class="nav navbar-nav float-sm-right">
        <li class="nav-item">
          <a class="nav-link" href="#">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">BLOG</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">LOGIN</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">SIGN UP FREE</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

＆＃13;

{{1}}

＆＃13;

Bootstrap V4可折叠导航栏对齐

1 个答案: