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中不起作用;我用凉亭安装了。

什么是解决方案，让表格处于正确的边缘？或者这些课程可以合并吗？

我必须说：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的{{1}} ...

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

margin-left:auto;

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

Answer 2

如果您将所有内容放在Bootstrap列中，它将按预期工作：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<div class="container">
    <div class="row">
        <div class="col-12">
            <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>
        </div>
    </div>
</div>

Bootstrap 4类可以组合 - 内联还是浮动 - sm-right不能合并？

2 个答案: