Question

我要做的是将品牌名称/图像居中，并在两侧放置导航栏。您可以在这里找到代码：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>

我尝试了我能想到的所有可能的解决方案，该品牌始终如一。谢谢！

Answer 1

CodePen：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;}

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

1 个答案: