Марка Boostrap Navbar слева и ссылки по центру - PullRequest
Новая
       19

Марка Boostrap Navbar слева и ссылки по центру

0 голосов
/ 23 мая 2019

Я следовал этому коду, имея левую марку и центральные ссылки: 

.flex-fill {
   flex:1;   
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
    <button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <span class="navbar-brand d-flex flex-fill">Brand</span>
    <div class="navbar-collapse collapse" id="navbar">
        <ul class="navbar-nav justify-content-center d-flex flex-fill">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="d-flex flex-fill"><!--spacer--> </div>
</nav>


<div class="container-fluid">
    <h5 class="text-center">--center--</h5>
</div>

Когда я пытаюсь продвинуть марку немного дальше вправо, ссылки также перемещаются в центр в оставшееся пространство.

Есть ли способ, с помощью которого я могу переместить марку дальше вправо, при этом ссылки по центру будут по всей ширине окна, а не по оставшемуся пространству справа от марки?

1 Ответ

0 голосов
/ 23 мая 2019

Применяя position: absolute к «Брэнду» span, чтобы вы могли перемещать его независимо от меню, также удаляя ненужные div spacer и d-flex классы, потому что класс navbar уже использует display : flex по умолчанию, я применил маржинальное поле слева от 3rem к «Брэнду» span с помощью помощника класса начальной загрузки ml-5 только для демонстрации (вы можете установить собственную маржу вВаше удобство).

Код ниже: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.flex-fill {
   flex:1;   
}
</style>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
    <button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <span class="navbar-brand position-absolute ml-5">Brand</span>
    <div class="navbar-collapse collapse" id="navbar">
        <ul class="navbar-nav justify-content-center flex-fill">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>


<div class="container-fluid">
    <h5 class="text-center">--center--</h5>
</div>
...