时间戳

首页 > 解决方案 > 使品牌站与折叠按钮在同一条线上

html - 使品牌站与折叠按钮在同一条线上

问题描述

我希望我的品牌标志与我的折叠按钮站在同一条线上。但我不会工作，它一直像图片上一样。在此处输入图像描述

我已经尝试添加float left到按钮和float right品牌，但运气。我也试过进入我的 f12 并禁用所有有填充或边距的东西，但仍然没有运气。如何解决这个问题？

我的导航代码是这样的：

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="mainNav">
    <div class="container">
        <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>
        <a class="navbar-brand js-scroll-trigger" href="#page-top">
            <img id="NavLogo" src="../Content/images/NavLogo.png" />
        </a>
    </div>
</nav>

我读过我应该使用Pull，但据我所知，这适用于bootstrap3，而且我使用的是4，但最终拉动的效果与float不同吗？

标签： htmlcsstwitter-bootstrap

解决方案

您应该使用“row”和“col”来布局内容

<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 网格系统

推荐阅读