Question

我希望我的品牌徽标与我的折叠按钮保持一致。但是我不会工作，它会像图片一样不断下去。

我尝试将DecisionTreeClassifier添加到按钮上，并将float left添加到品牌上，但是很幸运。我也尝试过f12并禁用所有具有填充或边距的内容，但仍然没有运气。如何解决？

我的导航代码是这样：

float right

我读到我应该使用Pull，但是据我所知，它是用于bootstrap3的，而我使用的是4，但是最后是否不将其与float一样？

Answer 1

您应该使用“行”和“列”来布局内容

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="mainNav">
<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#forside">Forside</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#cocktails">Cocktails</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#omos">Om os</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#priser">Priser</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#kontakt">Kontakt</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-sm-9">
            <a class="navbar-brand js-scroll-trigger" href="#page-top">
                <img id="NavLogo" src="../Content/images/NavLogo.png" />
            </a>
        </div>
    </div>
</div>

在https://getbootstrap.com/docs/4.0/layout/grid/上检查Bootstrap网格系统

使品牌与折叠按钮位于同一行

1 个答案: