时间戳

首页 > 解决方案 > 将品牌名称/图像居中并在两侧都有导航栏项目

html - 将品牌名称/图像居中并在两侧都有导航栏项目

问题描述

我想要做的是将品牌名称/图像居中并在两侧都有导航栏项目。你可以在这里找到代码：https ://codepen.io/anon/pen/MdNEdL

<!DOCTYPE html>
<html>

<head>

    <title>Above Peak</title>

    <link rel="icon" type="image/png" href="favicon.png"/>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>

    <nav class="navbar navbar-dark bg-dark navbar-expand-md">

        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">

            <div class="navbar-nav d-flex justify-content-start">

                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

                <a class="nav-item nav-link" href="#">Features</a>

                <a class="nav-item nav-link" href="#">Pricing</a>

            </div>

        </div>

        <div class='d-flex justify-content-center'>

            <a class="navbar-brand" href="/">

                Brand

            </a>

        </div>

        <div class='d-flex justify-content-end'>

            <div class="navbar-nav">

                <a class="nav-item nav-link" href="#">About</a>

            </div>

        </div>

        <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>

    </nav>

我已经尝试了我能想到的所有可能的解决方案，品牌始终保持正确。谢谢！

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

代码笔： https ://codepen.io/anon/pen/WBVMbp

HTML 

<html>

    <head>

        <title>Above Peak</title>

        <link rel="icon" type="image/png" href="favicon.png"/>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    </head>

    <body>

        <nav class="navbar navbar-dark bg-dark navbar-expand-md">

            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">

                <div class="navbar-nav d-flex justify-content-start">

                    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

                    <a class="nav-item nav-link" href="#">Features</a>

                    <a class="nav-item nav-link" href="#">Pricing</a>

                </div>

            </div>

            <div class="navbar-header">

                <a class="navbar-brand" href="/">

                    Brand

                </a>

            </div>

            <div class='d-flex justify-content-end'>

                <div class="navbar-nav">

                    <a class="nav-item nav-link" href="#">About</a>

                </div>

            </div>

            <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>

        </nav>

CSS

.navbar-header {
    float: left;
    text-align: center;
    width: 100%;
}
.navbar-brand {float:none;}

推荐阅读