徽标不适合自举导航栏

时间:2014-09-05 12:49:04

标签: html css twitter-bootstrap

我正在尝试将导航中的图像更改为更大的尺寸。

然而,通过这样做,导航栏的格式不正确。

enter image description here

我在这里有代码:http://www.bootply.com/941lMP3fj6#

问题可能是图像位于锚标记中。但不确定。

4 个答案:

答案 0 :(得分:13)

尝试:

.navbar-brand 
{
    padding-top: 0;
}

工作:http://www.bootply.com/cCg5FvZyZP

答案 1 :(得分:4)

将此添加到您的样式中:

.navbar-brand
{
    margin: 0;
    padding: 0;
{

.navbar-brand img
{
    max-height: 100%;
}

http://www.bootply.com/rAzwwIbCBI

答案 2 :(得分:2)

您需要调整导航栏的高度。

您可以在LESS中使用此变量来调整高度,它会垂直居中导航栏并包含所有必要的填充:

@navbar-height

50px是默认值。

如何在常规CSS中进行调整,更改min-height的{​​{1}}和.navbar的高度,然后调整navbar-fixed-top的填充。

这是顶部应该如何构建(缺少navbar-header):

.navbar-nav

示例Bootply:http://www.bootply.com/tOoeM8o8Om

答案 3 :(得分:1)

<div class="container">
                <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div class="navbar navbar-collapse collapse navbar-responsive-collapse">
                    <div class="pull-left" style="margin-right: 15px;">
                         <a rel="home" href="/" title="www.site.nl">

                    <img src="//placehold.it/200x51">
                </a>
                    </div>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="">Home</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Link 1</a></li>
                        <li><a href="">Link 2</a></li>
                    </ul> <!-- end nav-->
                    <ul class="nav navbar-nav pull-right">
                        <li class="dropdown">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown"><strong class="caret"></strong> Select language</a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="">NL</a></li>
                                <li><a href="">IL</a></li>
                                <li><a href="">ENG</a></li>
                            </ul>
                        </li>
                    </ul> <!-- end nav menu right -->
                </div> <!-- end nav-collapse -->

            </div>

将您的徽标放在容器内。

以上代码有效!!

检查并告诉我您是否有任何问题!!