Держите центр, но приближайте элементы - PullRequest
Новая
       6

Держите центр, но приближайте элементы

0 голосов
/ 04 марта 2020

У меня есть следующий фрагмент (Открыть как полная страница): 

.navbar {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .20);
    background: #fff;
    border: 0;
    max-height: 65px
}

#navbar_navigation > div.row > div > a{
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #244b5a;
}

.navbar_navigation{
     text-align: center;
     font-family: 'Montserrat-SemiBold', sans-serif;
     font-size: 22px;
}

.vertical-align {
    display: flex;
    align-items: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-fixed-top" role="navigation">
    <div class="row vertical-align">
        <div style="text-align: center; background: red;" class="col-md-2">
            <a href="/">
                Logo
            </a>
        </div>
        <div id="navbar_navigation" class="col-md-8">
            <div class="row">
                <div style="background: gray;" class="col-md-3 navbar_navigation">
                    <a href="#">My menu 1</a>
                </div>
                <div style="background: purple;" class="col-md-3 navbar_navigation">
                    <a href="#">Prices</a>
                </div>
                <div style="background: green;" class="col-md-3 navbar_navigation">
                    <a href="#">Help Me Please</a>
                </div>
                <div style="background: yellow;" class="col-md-3 navbar_navigation">
                    <a href="#">My account</a>
                </div>
            </div>
        </div>
        <div style="background: red; text-align: center" class="col-md-1">
            <a href="#">
                TXT
            </a>
        </div>
        <div style="background: blue;" class="col-md-1">
            <a href="#">
                <div style="float: right; width: 65px; height: 65px; background: #2d4c55;"></div>
            </a>
        </div>
    </div>
</nav>

Я хочу приблизить друг к другу элементы My menu 1, Prices, Help Me Please и My account, но сохранить одинаковое поле для всех элементы.

enter image description here

1 Ответ

0 голосов
/ 04 марта 2020

Самый простой способ сделать это - сделать их меньше. Таким образом, их тексты будут «ближе».

Если вы хотите сохранить ширину navbar_navigation такой, какая она есть сейчас, вы можете добавить 2 пустых столбца в строку с классом bs (например, col-md-1). ). Тогда у вас осталось 10 кол. Сделайте col-md-10 и заверните 4 col-md-3 внутри этого столбика.

Таким образом, результат в том, что 4 столбца по-прежнему равны, но меньше, поэтому текст «ближе». navbar_navigation имеет такую ​​же ширину (это то, что, я думаю, вы имеете в виду, когда говорите, что хотите сохранить поля).

Проверьте фрагмент кода ниже в Full Page.

Как Примечание. Не используйте поплавок. Придерживайтесь bootstrap и flexbox. 

.navbar {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .20);
    background: #fff;
    border: 0;
    max-height: 65px
}

#navbar_navigation > div.row > div > a{
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #244b5a;
}

.navbar_navigation{
     text-align: center;
     font-family: 'Montserrat-SemiBold', sans-serif;
     font-size: 22px;
}

.vertical-align {
    display: flex;
    align-items: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-fixed-top" role="navigation">
    <div class="row vertical-align">
        <div style="text-align: center; background: red;" class="col-md-2">
            <a href="/">
                Logo
            </a>
        </div>
        <div id="navbar_navigation" class="col-md-8">
            <div class="row">
             <div class="col-md-1 navbar_navigation">
                </div>
                <div class="col-md-10">
                <div style="background: gray;" class="col-md-3 navbar_navigation">
                    <a href="#">My menu 1</a>
                </div>
                <div style="background: purple;" class="col-md-3 navbar_navigation">
                    <a href="#">Prices</a>
                </div>
                <div style="background: green;" class="col-md-3 navbar_navigation">
                    <a href="#">Help Me Please</a>
                </div>
                <div style="background: yellow;" class="col-md-3 navbar_navigation">
                    <a href="#">My account</a>
                </div>
                </div>
                 <div class="col-md-1 navbar_navigation">
                </div>
            </div>
        </div>
        <div style="background: red; text-align: center" class="col-md-1">
            <a href="#">
                TXT
            </a>
        </div>
        <div style="background: blue;" class="col-md-1">
            <a href="#">
                <div style="float: right; width: 65px; height: 65px; background: #2d4c55;"></div>
            </a>
        </div>
    </div>
</nav>
...