css - Bootstrap 顶部导航栏 : Margins and Height

标签 css twitter-bootstrap

我正在查看示例 starter-template.css,这是最简单的带有标题的单列页面。

JSFiddle:https://jsfiddle.net/knbxy2d8/

我不明白全黑标题 从上到下在哪里。如果您在 Firebug 中选择黑色 header ,它实际上是第一个元素,

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">

只选择这个黑条高度的 90%,而不是整个条。顶部/底部的黑色部分来自哪里?

我的问题是,我需要知道页眉的确切高度和容器,因为我是在 Photoshop 中设计它的样式。这将是一个背景图像。所以它需要用一个完整的 div 替换任何黑色子栏。为什么 Bootstrap 会这样做?

enter image description here

顺便说一句,关于这条评论: 它在移动设备上为 54 像素高,但为 56 像素 那么我如何用一致的图像替换它呢?我可以强制它具有相同的高度吗?

最佳答案

因为我无法在评论中发布图片,所以将其发布为答案。

正如您从下面的 chrome 开发人员工具的屏幕截图中看到的,您看到的空白区域是 应用的 nav 元素顶部和底部的 0.5rem 填充。导航栏类。

chrome's developer tools

关于css - Bootstrap 顶部导航栏 : Margins and Height,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44478043/

相关文章:

悬停方向上的CSS

android - ionic 标签恼人的激活颜色

javascript - 悬停时放大图像并添加聚光灯文本

java - 从 JavaFX 打印时设置要使用的 CSS

javascript - 如何在 Bootstrap 模式窗口中将 id 值作为变量回显?

php - 水平形式的文本区域宽度

php - 如何让内容在用户登录时消失?

css - 设计 Twitter Bootstrap 搜索表单

html - 将内容对齐到底部(导航栏)

html - 显示 :flex ignored in Chrome browser