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

时间:2012-07-16 03:27:50

标签: html css twitter-bootstrap navigation responsive-design

我正在使用基于Twitter Bootstrap的模板来构建我正在构建的网站(这里是链接:rwphoto),但我在移动下拉菜单中遇到了一些问题。如果我将导航栏内部div更改为194px以适合我正在使用的重复图像的高度,它会重叠而不是按下内容。我只是不确定为什么这是一个问题。我环顾四周,但似乎无法找到解决方案。

此外,我如何将.brand元素(徽标)置于移动设备中心,而不是将其放在左侧?我如何将导航链接垂直居中,并在徽标和屏幕右边缘之间水平居中?

叹息 ...抱歉,第一次使用Bootstrap,显然......:/

1 个答案:

答案 0 :(得分:0)

对于中心徽标,请将此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; }