twitter-bootstrap - Bootstrap 4 类 form-inline 和 float-sm-right 不能合并吗？

Question

HTML:

<form class="form-inline float-sm-right">
  <input type="text" class="form-control" placeholder="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>

这是来自使用 Bootstrap v4.alpha2 的示例。
(我已经发现应该使用 float- 而不是 pull- :(

但它在 Bootstrap v4.0.0 中不起作用；我使用凉亭安装的。

解决方案是什么，让表格位于正确的边缘？
还是不能合并类(class)？

我必须说:Bootstrap 假装使样式更容易，但对我来说，它变得越来越糟——版本之间的变化如此之多 :-(

编辑:我会给你整个代码块:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="nav-main">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Features</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Pricing</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">About</a>
    </li>
  </ul>
  <form class="form-inline float-sm-right">
    <input type="text" class="form-control" placeholder="Search">
    <button class="btn btn-outline-success" type="submit">Search</button>
  </form>
</nav>

希望与所有 bootstrap v4.0.0 兼容!

Answer 1

Bootstrap 4 Navbar 是 flexbox，因此 float 不适用于对齐。最简单的方法是使用自动边距将表单推到右侧。只需使用 ml-auto这是margin-left:auto; ...

https://www.codeply.com/go/Xhdz5MQIDS

<nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="nav-main">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Features</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Pricing</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">About</a>
    </li>
  </ul>
  <form class="form-inline ml-auto">
    <input type="text" class="form-control" placeholder="Search">
    <button class="btn btn-outline-success" type="submit">Search</button>
  </form>
</nav>

相关问题:
Bootstrap 4 align navbar items to the right