html - Bootstrap 4 Button 到正确的问题

Question

我是 Bootstrap 4 的新手，我正在使用 Bootstrap 4 设计一个非常简单的页面。我创建了一个 NAV，我需要在左侧添加 Logo 和公司名称(这是有效的)，我需要两个按钮 Assets 净值的权利。我在论坛中发现了很多建议，但似乎没有一个对我有用。我卡住了。

这是我的 HTML 代码:

<nav class="navbar bg-avesta-blue">
<div class="row">
    <div class="col-sm-12">
        <a class="navbar-brand text-light" href="#">
          <img src="images/header-logo.png" class="float-left d-inline-block align-top pr-3" alt="">
          <h3 class="pt-1">
          AVESTA
          </h3>
        </a>
        <div class="float-right text-right">
            <a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
            <a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
        </div>
    </div>
</div>

这是现在的样子: As you can see, both buttons are aligned to the left. I need them to the right.

Answer 1

导航栏有 supported content ，并且网格 row>col 并非设计用于导航栏内。 Read and follow the documentation .

当您在 flexbox 导航栏内使用 .row 时，它不会像往常一样是全宽的，并且会“收缩”到左侧。您可以设置 w-100 使行全宽，但更好的方法是按预期使用受支持的导航栏内容。

"Use our spacing and flex utility classes for controlling spacing and alignment within navbars"

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

<nav class="navbar bg-avesta-blue">
    <a class="navbar-brand text-light" href="#">
        <img src="images/header-logo.png" class="float-left d-inline-block align-top pr-3" alt="">
        <h3 class="pt-1">
          AVESTA
        </h3>
    </a>
    <div class="ml-auto">
        <a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
        <a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
    </div>
</nav>

一旦您拥有正确的导航栏结构，就可以使用auto-margins 或flexbox 实用程序完成对齐，如other related questions 中所述。