固定导航栏上的引导标志

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>

我想要什么：

我得到了什么：

注意：自定义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 */
}

只需在 <a> 标签的 top 和 bottom 上保留一些边距。不要依赖其他元素作为该 <a> 标签的边距，而是将 cssrule 应用到其自身上作为边距。

或者只是放入另一个.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;
}