Question

任何人都可以就以下内容提出建议......

我正在学习Bootstrap 4但我在导航栏左侧对齐品牌元素时遇到问题 - 当数据切换可见时。品牌保持一致，直到出现数据切换，然后它似乎想要居中。

我只是希望品牌留在左侧 - 即保持其默认位置 - 当品牌出现时，数据会切换到品牌的左侧。（在下面的示例中，为了示例的目的，数据切换是永久显示的。）

我已尝试过＆＃34; float-left＆＃34;，＆＃34; justify-content-end＆＃34;，以及品牌元素的各种解决方案，但似乎没有任何效果，我可以＆＃39;理解为什么 - 这应该很简单！

<nav class="navbar navbar-dark bg-dark">
<!--Toggler LHS-->
<button class="navbar-toggler" style="border:1px solid red" type="button" data-toggle="collapse" data-target="#verticalNav" aria-controls="verticalNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<!--Brand LHS-->
<a class="navbar-brand float-left" href="#"  style="border:1px solid red"> LOGO</a>

<!--fixed Links, RHS-->
<div style="float:right; border:1px solid red">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
</div>

非常感谢您的帮助

Answer 1

不要使用浮动来对齐Bootstrap 4 Navbar内容。既然Navbar是flexbox，您可以使用自动边距或flexbox utils ...

<nav class="navbar navbar-dark bg-dark">
    <!--Toggler LHS-->
    <button class="navbar-toggler" style="border:1px solid red" type="button" data-toggle="collapse" data-target="#verticalNav" aria-controls="verticalNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!--Brand LHS-->
    <a class="navbar-brand mr-auto" href="#" style="border:1px solid red"> LOGO</a>

    <!--fixed Links, RHS-->
    <div style="border:1px solid red">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
    </div>

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

另见： Bootstrap NavBar with left, center or right aligned items

Bootstrap 4 Brand不会左对齐数据切换

1 个答案: