Question

我目前在导航栏右侧有一个徽标（代码如下）如何让导航栏与行的底部对齐，而不是粘在顶部？徽标的高度高于导航栏，因此设置行的高度

<div class="row">
    <div class="col-sm-10" id="nav-left">
        <div class="navbar-header">
            <div class="collapse navbar-collapse" id="tws-navbar-top">
                <ul class="nav navbar-nav navbar-top">
                    <li><a href="#" class="navbar-top-item">HOME</a></li>
                </ul> 
            </div>
        </div>
    </div>
    <div class="col-sm-2"  id="nav-right">
        <img class="img-responsive" src="image" alt="logo" />
    </div>
</div>

Answer 1

您可以将margin-top添加到.navbar-header DIV。

边距的值等于徽标的高度减去50px，这是Bootstrap中的默认导航栏高度。

.navbar-header {
    margin-top: 20px !important; //if the logo has a 70px height.
  }

示例here on bootply。

Bootstrap 3.0将导航栏和徽标对齐到底部

1 个答案: