Question

我是Bootstrap 4的新手，我正在使用Bootstrap 4设计一个非常简单的页面。我创建了一个NAV，我需要一个左侧的徽标和公司名称（这是有效的）我需要NAV右侧的两个按钮。我在论坛中发现了很多建议，但似乎没有一个对我有用。我被卡住了。

这是我的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

Navbar有supported content，网格row>col并非设计为在Navbar中使用。 Read and follow the documentation

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

“使用我们的间距和flex实用程序类来控制间距和导航栏中的对齐“

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>

如果您拥有正确的Navbar结构，可以使用自动边距或 flexbox 实用程序完成对齐，如other related questions

中所述

Bootstrap 4按钮到正确的问题

1 个答案: