Центрируйте название бренда / имидж и располагайте элементы навигации по обеим сторонам - PullRequest
Новая
       11

Центрируйте название бренда / имидж и располагайте элементы навигации по обеим сторонам

0 голосов
/ 08 июня 2019

То, что я хочу сделать, это центрировать фирменное наименование / изображение и иметь элементы навигационной панели с обеих сторон. Вы можете найти код здесь: 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>

Я испробовал все возможные решения, которые у меня есть, Бренд остается верным. Спасибо!

1 Ответ

0 голосов
/ 08 июня 2019

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;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...