Question

我想使导航向右对齐，但是将.ml-auto与.d-flex一起使用是行不通的，我也不明白为什么。

<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="panel-form">
  <div class="row">
    <div class="col-lg-3">
      <form action="">
      <input type="text" placeholder="Искать по имени" class="form-control">
      </form>
    </div>
    
 <div class="col-lg-9"

        <ul class="nav nav-pills justify-content-end">
        <li class="nav-item pl-4"><a href="#" class="nav-link active">Active</a></li>
        <li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
        <li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
        <li class="nav-item pl-4"><a href="#" tabindex="-1" aria-disabled="true" class="nav-link disabled">Disabled</a></li>
        </ul>
      </div>
    </div>
</div>

Answer 1

由于Bootstrap 4.x已经将Flexbox布局应用于其导航组件，因此您需要依赖于面向Flexbox的对齐实用程序。对于您要描述的行为，您可以只选择一个附加类：justify-content-end

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<ul class="nav nav-pills justify-content-end">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
</ul>

Bootstrap 4.x具有许多不同的对齐实用程序，它们与Flexbox或更基本的放置方式最匹配。我强烈建议您查看其justifying and aligning Flexbox content

的文档

Answer 2

如果您检查元素，则两列之间都没有“空白”空间来增加边距，因为两列都使用了全部12个插槽；相反，您应该将ml-auto类放在ul元素中，该元素不是使用全部可用宽度，并且可以在其父级内部移动；

另一种选择实际上是使用Bootstrap提供的flex-utilities来对齐和证明flex容器中的内容。

编辑： 因为您需要的是保持输入大小；您可以将该列设置为col-auto，这将使该列仅使用包含其元素所需的空间；然后在另一列中可以使用col，以便它使用所有剩余空间，而不必设置特定数量的插槽；最后，您可以再次在justify-content-end元素上使用诸如ul之类的flex实用程序，使其粘贴在右侧。

有许多选项可将大小应用于列，请阅读Grid System

<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="panel-form">
  <div class="row justify-content-between">
    <div class="col-auto">
      <form action="">
        <input type="text" placeholder="Искать по имени" class="form-control">
      </form>
    </div>

    <div class="col">
      <ul class="nav nav-pills justify-content-end flex-nowrap">
        <li class="nav-item pl-4"><a href="#" class="nav-link active">Active</a></li>
        <li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
        <li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
        <li class="nav-item pl-4"><a href="#" tabindex="-1" aria-disabled="true" class="nav-link disabled">Disabled</a></li>
      </ul>
    </div>
  </div>
</div>

bootstrap 4 col与ml-auto右对齐

2 个答案: