html - Twitter Bootstrap nav Collapse 下拉菜单内容重叠?

标签 html css twitter-bootstrap navigation responsive-design

我正在为我正在构建的网站使用基于 Twitter Bootstrap 的模板(此处是链接:rwphoto),但我在使用移动下拉菜单时遇到了一些问题。如果我将 navbar-inner div 更改为 194px 以适应我正在使用的重复图像的高度,它会重叠而不是向下推送内容。我只是不确定为什么这是一个问题。我环顾四周,但似乎找不到解决方案。

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

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

最佳答案

对于居中 Logo ,将此 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; }

关于html - Twitter Bootstrap nav Collapse 下拉菜单内容重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11497780/

相关文章:

css - 单击时选择整个 <td> 而不是仅选择其中的 <a>

jquery - 如何在 3 秒后显示导航栏?

javascript - 将字体-Awesome 图标旋转 180 度在下拉按钮内

javascript - 更改数据表上的默认排序 jQuery Bootstrap 插件

jquery - 加载条显示在图像旁边

css - 如何对齐页脚中的社交图标

twitter-bootstrap - bootstrap-table 如何使用搜索和过滤?

javascript - 多个 CSS/JS 下拉菜单

HTML在CSS中的框的上边框插入文本

javascript - 如何解析此 XSL 文件并读取将其嵌入 HTML 文件中的元素