Twitter Bootstrap nav折叠下拉菜单是重叠的内容？

我正在使用基于Twitter Bootstrap的模板来创建我正在构建的网站（链接：rwphoto），但我在移动下拉菜单中遇到了一些问题。如果我将navbar-inner div更改为194像素以适合我使用的重复图像的高度，它会重叠而不是将内容向下推。我只是不确定为什么这是一个问题。我环顾四周，但似乎无法找到解决办法。Twitter Bootstrap nav折叠下拉菜单是重叠的内容？

此外，我将如何将.brand元素（徽标）放在移动设备中，而不是将它放在左侧？我如何获得垂直居中的导航链接，并在标识和屏幕右边缘之间水平移动？

叹息 ...很抱歉，第一次使用引导，很明显...：/

来源

2012-07-16 Justin W

即使我将鼠标悬停在导航链接上，我也没有看到下拉菜单。 – 2012-07-16 04:13:29

如果您调整浏览器的大小（或者如果您在移动设备上查看它），将会出现一个包含三行的按钮。这是菜单按钮。点击那个。 – 2012-07-17 20:32:31

定心标志，实现这个CSS代码到被称为类...

.container { position:relative; }  
.brand { text-align: center; width: 97%;} 

.navbar .btn-navbar { 
    display: block; 
    position: absolute; 
    right: 0; 
}

对于居中的导航链接，

.nav-collapse .nav > li > a { 
    margin: 12px 0 !important; 
    text-align: center; 
}

而对于下拉覆盖问题，添加此，

.nav-collapse { padding-top: 1em; }

来源

2012-07-16 06:36:54 SaurabhLP

检查这个链接，你可以自定义，如你所愿...... http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – SaurabhLP 2012-07-18 05:19:43

我的意思是我想标志居中一次它已经切换到768px宽。它应该留在更宽的屏幕左侧。我对媒体查询相当陌生，但我想这是他们进来的地方，是的？我尝试了上面的代码，但链接并不真正在导航栏中垂直排列，并且在徽标右侧的屏幕之间水平排列。另外，'padding-top'设置为'1em'似乎没有办法。 :( – 2012-07-18 05:31:29

啊！我在Twitter的官方页面上查看了'.navbar-inner'的代码，高度由'min-height'，** not **'height'设置，简单的错误我改变了'.navbar-inner'到'min-height：194px'，那就做到了！所以，现在唯一的问题是使用媒体查询标识，然后让这些链接以正确的方式居中。 – 2012-07-18 06:01:58

Twitter Bootstrap nav折叠下拉菜单是重叠的内容？

回答

相关问题