导航块中间的所有导航链接

时间:2015-05-24 18:36:20

标签: html css twitter-bootstrap

我使用startbootstrap-small-business模板并尝试根据我的需要进行调整。 我添加了一个新徽标,并被迫将导航栏的高度更改为ca. 120像素。 我现在需要/想要做的是垂直对齐徽标右侧的链接。他们需要在导航栏的中间。 我尝试对导航栏的line-height:60px元素使用行高(@media {line-height:2px }.navbar-nav li a),它适用于正常的浏览器分辨率,但是当我更改浏览器的大小以进行检查时如何在小型设备中看到线高不会被@media覆盖,它仍然需要60px的大小,下拉菜单中链接的高度要大。有人可以帮助我吗?

/*!
 * Start Bootstrap - Small Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 110px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}

.navbar {
    min-height: 100px;
}


.navbar-fixed-top .nav {
    padding: 0;
}

.navbar-nav li a {
 line-height: 60px;
}

.navbar-fixed-top .navbar-brand {
    padding: 0 15px;
}

.navbar-inverse {
    background-color:#000;
}

footer {
    padding: 30px 0;
}

@media(min-width:@screen-sm-min) {
    body {
        padding-top: 110px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    }

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

    .navbar-nav li a {
       line-height: 2px;
     }
}

2 个答案:

答案 0 :(得分:1)

我在这个主题的帮助下得到了它: Bootstrap 3 Navbar with Logo。 这是解决我的问题

@AmperPil你的想法在我的情况下不起作用;)无论如何,谢谢你的帮助

答案 1 :(得分:-1)

请尝试将其用于媒体查询:

@media screen and (max-width: 300px)

300px是你想要的屏幕大小。
您的工作可能正在工作,因为bootstrap使用较少的内容来制作您可能没有使用的媒体查询。 媒体查询的MDNW3Schools页面是否有用。