左右对齐Bootstrap导航栏文字,左对齐品牌徽标

时间:2018-09-20 19:50:37

标签: html css html5 twitter-bootstrap bootstrap-4

因此,我希望做一些在一些网站上看到的有趣的事情。我想将navbar品牌徽标显示在当前显示的左侧,但是我想将nav链接放在右边。

创建CSS类以使内容向右对齐或文本向右对齐不起作用吗?

HTML

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light shadow">
    <a class="navbar-brand" href="index.html">
        <img src="imagery/logo.png" width="80" height="80" alt="" class="navbar-logo-size">
    </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="index.html">
                <p>Home</p>
                <span class="sr-only">(current)</span>
            </a>
            <a class="nav-item nav-link" href="about.html">
                <p>About</p>
            </a>
        </div>
    </div>
</nav>

0 个答案:

没有答案