个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我正在使用最新版本的 Bootstrap 来设置网站样式，但我遇到了一个看起来像错误的东西。你可以view it here作为 JSFiddle。
如果我添加一个标准的固定位置顶部导航栏，然后在其后添加一些内容，后续内容将被拉高约 60 像素，因此它最终位于顶部导航栏下方。所以我看了看 Bootstrap examples pages并发现了一些明显用于纠正此问题的内联 CSS(在 head 部分):
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
这让我大吃一惊，我想知道这是否是 Bootstrap 中一个被忽视的错误的结果，或者我是否应该理所当然地这样做。
如果是后者，我很想知道为什么当 Bootstrap 应该是一个现成的 CSS 解决方案时我应该使用内联 CSS。
如果是前者，我非常想知道为什么会这样 - 为什么 Bootstrap CSS 不直接将填充添加到导航栏或其他东西的底部？
最佳答案
来自documentation :
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the
<body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
.navbar-fixed-top是position: fixed , 所以 padding不会影响任何其他元素。
编辑
“介于两个 .css 之间”的建议有助于防止移动设备出现问题。作为position: fixed在很多设备上都坏了，导航栏变成了static和 <body> padding 在顶部创建一个空白包装。所以bootstrap-responsive.css覆盖该视口(viewport)的填充。
您可以简单地通过向规则添加媒体查询来重现该行为:
@media (min-width: 979px) {
body {
padding-top: 60px;
}
}
在您的自定义样式表中包含此规则并忘记 <style>标签。
关于html - 为什么在 Bootstrap 中使用固定位置的顶部导航栏时必须向 <body> 添加填充？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12619089/
25
4
0
当调用 func didBegin(_ contact: SKPhysicsContact) 的 SKScene 中发生接触时，需要确定哪个 SKPhysicsBody 是contact.bodyA
HTML: CSS: body { width : 1000px ; } header { width : 100% ; } 如果有这样的代码， 我认为页眉的宽度将与主体的
我刚刚通过网站完成设计，现在我正在尝试将整个 body 布置成一个整体，而不是不断重复的瓷砖。请问我该怎么做？ 我不确定我说的是否有道理，但就像一张墙纸在拉伸(stretch)，而不是 30 个小瓷砖
我试图在我的内部包装器上获得一个滚动条，而不是主体本身: CSS body { overflow: hidden; } #body_wrap { overflow-y: auto;
body { margin: 0px; border: 1px solid black; } #head { text-align: center; background: linea
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improv
我试图了解此 CSS 规则将应用于哪些元素: body h1, body .h1 { font-family: 'Open Sans', sans-serif !important;
此问题与使用 Jade templates 有关与 Express.js . 我知道当我写 layout.jade其中包含: !!! html body != body hea
我正在尝试为 body 设置不透明度。但是，我遇到了一个问题。 在body 上设置不透明度时，只有它的内容会受到影响。 背景不受不透明度的影响。 $("button").click(function(
我的游戏中有两个对象:球和星星 球是静态或动态的物体。 对于明星: 我需要知道星星何时与球相撞 但它需要穿过小球并且不受碰撞影响 我应该怎么做？ 谢谢 袜套 最佳答案 您想使用 Sensors (6.
我以前问过这个问题，但所有答案都不起作用，所以我有一个示例页面，webpage .我有一个重新调整大小的菜单，我想在菜单外单击时关闭菜单，以及在第一次切换下拉菜单时让主体向下动画，这样下拉菜单就不会隐
我有一个漂浮在我其余内容上的井。我遇到的问题是，当它加载页面时，它会下推其余内容。我该如何更改它以便它悬停在所有内容上并且不会在页面加载时将内容下推。 这是页面加载的图像。 这是向下滚动页面的图片 请
在我的代码中我有这个: #body { background-color: #efeeef; clear: both; padding-bottom: 35px; } 还有这个
我想做以下事情。 $("a").click(function (event) { event.preventDefault(); $.get($(this).attr("href"),
在documentation在其他地方，我看到使用了 Body 但不知道它是什么。 谁能解释一下这三个选项是什么意思？ from fastapi import Body from pydantic i
我试图在 body 加载后触发一个功能。我知道你可以从 body 标签中做到这一点，但如果可能的话，我更愿意从 JS 中做到这一点。 例如:document.getElementsByTagName(
在 Pymunk 中，当我旋转一个物体时，它的形状并没有旋转。当我施加一个冲动时，形状会如预期的那样同步移动。我的谷歌搜索表明 body 的形状应该在 body 旋转时旋转。我是否从根本上误解了旋转？
在我的移动网站/应用程序中使用 jQueryMobile 时，我刚刚开始遇到非常奇怪错误 编辑 我正在添加图片，可能更容易理解问题 edit2 我发现了这个问题。仍然好奇为什么会这样 如果您想查看原
我正在使用 Phaser.js 及其 p2 物理来模拟“流体”。你可以在this中看到创建一种流体体的示例(归功于 John Watson)。唯一可能的交互是鼠标移动。 我注意到一些有趣的特性可能有助
我认为是后一项， :not(body> element) 说明 body 标签中的所有“元素”元素。这是否与 同义 body >:not(element) ?? 最佳答案 body >:not(ele
我是一名优秀的程序员,十分优秀！