Question

我正在尝试创建一个左侧带有按钮的导航栏和2个图标，然后是最右侧的按钮。

我可以通过一些我发现的例子来实现，但我不希望任何按钮在小屏幕上崩溃。

让我想知道我是否真的需要使用导航栏，但这是我的代码在alpha-6中工作，在beta-2中按钮不向右延伸，我该如何实现？

<nav class="navbar navbar-default fixed-top">
<div class="row">
    <div class="col">
        <div class="navbar-brand">
            <button type="button" class="btn btn-primary">
                <i class="fa fa-reorder"></i>
            </button>
            <img [src]="source/path" height="25px" /><img [src]="source/path" height="25px" />
        </div>
    </div>
    <div class="col col-auto text-right">
        <span class="logged-in-user">username</span>

        <button class="btn btn-secondary">
            <i class="fa fa-wechat"></i>
        </button>

        <button class="btn btn-secondary">
            <i class="fa fa-address-book"></i>
        </button>

        <button class="btn btn-secondary">
            <i class="fa fa-anchor"></i>
        </button>
    </div>
</div>
</nav>

Answer 1

使行的宽度为100％，并将ml-auto添加到第二个col（而不是右对齐）：

Bootstrap 4 Beta 2 - 导航栏：右对齐没有崩溃

1 个答案: