Question

我试图按照徽标高度向下推动导航栏线（显然也是内容）。这是我的HTML代码：

<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation">
    <div class="container">
        <div class="navbar-header transparent">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a>

        <div class="row">
            <div class="col-lg-12 custom-navbar-line">
                <div class="collapse navbar-collapse">
                    <ul class="nav nav-pills custom-nav-pills">
                        <li class="active"><a ng-href="#">Home</a></li>
                        <li><a ng-href="#">Page1</a></li>
                        <li><a ng-href="#">Page2</a></li>
                        <li><a ng-href="#">Page3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

我想要的是什么：

What I want

我得到了什么：

What I get

注意：自定义css类与定位没什么关系。

Answer 1

您可以尝试这样的事情：

<强> HTML：

<a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a>

<强> CSS：

a.navbar-brand { /*or add another class instead of changing this*/
    display:block;
    margin:50px 0 10px 0; /* Adjust the margin : top right bottom left */
}

只需在top标记的bottom和<a>上保留一些边距。不要依赖其他元素来获得<a>代码的边距，而是将css规则应用于其自身的保证金。

或者只是放入另一个.row：

<div class='row'>
    <a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a>
</div>

Answer 2

关闭<div class="container">并打开一个新的container，在导航栏的第二行周围有一个上边距。

Bootply example

更新了HTML：

<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation">
    <div class="container">
        <div class="navbar-header transparent">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a>
    </div>
    <div class="container new-nav-line">
        <div class="row">
            <div class="col-lg-12 custom-navbar-line">
                <div class="collapse navbar-collapse">
                    <ul class="nav nav-pills custom-nav-pills">
                        <li class="active"><a ng-href="#">Home</a></li>
                        <li><a ng-href="#">Page1</a></li>
                        <li><a ng-href="#">Page2</a></li>
                        <li><a ng-href="#">Page3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.new-nav-line{
    margin-top:20px;
}

固定导航栏上的Bootstrap徽标

2 个答案: