Question

如何将navbar品牌放在左侧，将汉堡包图标放在右侧？我试图在我的CSS浮动，但它不起作用..也许是因为我在代码上标记了这一行。在照片中解释了我要实现的目标。 Explained

  <nav class="navbar sticky-top navbar-expand-sm navbar-light">
    <div class="row mx-auto">
        <a class="navbar-brand" href="home.html">
            <img src="Images/logo.png" width="65" height="50">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="home.html">Почетна<span
                        class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Информации</a>
                <a class="nav-item nav-link" href="#">Контакт</a>
            </div>
        </div>
    </div>
</nav>

Answer 1

您可以使用此引导程序4导航栏代码段 https://startbootstrap.com/snippets/navbar-logo/ 或使用float-left和float-right引导程序类

Answer 2

使用justify-content-between;这里还有更多info。

<nav class="... d-flex justify-content-between">
    <!-- Your brand & content ||   [*****] link link link  -->
    <div class="...">
            <div class="brand-logo">...</div>
            <div class="hyperlinks">...</div>
    </div>
    <!-- Your menu -->
    <div class="menu">...</div>
</nav>

Answer 3

将flex-direction: row-reverse;添加到.navbar。无需浮动它们。

如何将navbar品牌放在左边，将汉堡包放在右边？

3 个答案: