保持中心，但要靠近元素

Question

我有以下代码段（打开为完整页面）：

.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彼此靠近，但所有元素的边距保持相同。

Answer 1

最简单的方法是将它们缩小。因此，他们的文字将更加“接近”。

如果要保持navbar_navigation的宽度不变，则可以在具有bs类的行内添加2个空cols（例如col-md-1）。那么您还有10个cols。创建一个col-md-10并将4 col-md-3包裹在该col中。

因此，结果是4个cols仍然相等，但较小，因此文本为“ closer”。的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>