I am building a project with Bootstrap and im facing little issue .I have a container below the Nav-top.My issue is that some portion of my container is hidden below the nav-top header.I dont want to use top-margin with container. Pls see below html in which im facing the issue
我正在用Bootstrap构建一个项目，我面临的问题很小。我的问题是容器的某些部分隐藏在导航顶标头下面。我不想在货柜上使用最高保证金。请见下面的html，我在其中面对的问题
Index7 个解决方案
#1
182
This is handled by adding some padding to the top of the
.这可以通过在的顶部添加一些填充来处理。
As per Bootstrap's documentation on .navbar-fixed-top, try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
根据Bootstrap在.navbar-fixed-top上的文档，尝试您自己的值，或者使用我们下面的代码片段。提示:默认情况下，导航条的高度是50px。
body {
padding-top: 70px;
}
Also, take a look at the source for this example and open starter-template.css.
此外，请查看这个示例的源代码并打开starter-template.css。
#2
27
I guess the problem you have is related to the dynamic height that the fixed navbar at the top has. For example, when a user logs in, you need to display some kind of "Hello [User Name]" and when the name is too wide, the navbar needs to use more height so this text doesn't overlap with the navbar menu. As the navbar has the style "position: fixed", the body stays underneath it and a taller part of it becomes hidden so you need to "dynamically" change the padding at the top every time the navbar height changes which would happen in the following case scenarios:
我猜你遇到的问题与顶部固定的导航条的动态高度有关。例如，当用户登录时，您需要显示某种“Hello [user Name]”，当名称太宽时，导航条需要使用更多的高度，这样文本就不会与navbar菜单重叠。由于导航条的样式是“位置:固定的”，身体会保持在下方，而较高的部分会隐藏起来，所以你需要在每次导航条高度发生变化时“动态”地改变顶部的填充，这种情况在以下场景中会发生:
The page is loaded / reloaded.
页面已加载/重新加载。
The browser window is resized as this could hit a different responsive breakpoint.
浏览器窗口将被调整大小，因为这可能会碰到一个不同的响应性断点。
The navbar content is modified directly or indirectly as this could provoke a height change.
导航条内容被直接或间接地修改，因为这会引起高度的变化。
This dynamicity is not covered by regular CSS so I can only think of one way to solve this problem if the user has JavaScript enabled. Please try the following jQuery code snippet to resolve case scenarios 1 and 2; for case scenario 3 please remember to call the function onResize() after any change in the navbar content:
这个动态性没有被常规的CSS覆盖，所以我只能想到一个方法来解决这个问题，如果用户启用了JavaScript。请尝试以下jQuery代码片段来解决案例场景1和2;对于案例场景3，请记住在导航条内容发生任何变化后，调用函数onResize():
var onResize = function() {
// apply dynamic padding at the top of the body according to the fixed navbar height
$("body").css("padding-top", $(".navbar-fixed-top").height());
};
// attach the function to the window resize event
$(window).resize(onResize);
// call it also when the page is ready after load or reload
$(function() {
onResize();
});
#3
14
Just define an empty navbar prior to the fixed one, it will create the space needed.
只要在固定的导航条之前定义一个空的导航条，它就会创建所需的空间。
// Your menu code
#4
7
It happens because with navbar-fixed-top class the navbar gets the position:fixed. This in turns take the navbar out of the document flow leaving the body to take up the space behind the navbar.
之所以会出现这种情况，是因为使用navbar-fixed-top类时，导航条的位置是固定的。这将轮流将导航条从文档流中移出，离开主体以占用导航栏后面的空间。
You need to apply padding-top or margin-top to your container, based on your requirements with values >= 50px. (or play around with different values)
您需要根据您的需求，在容器中应用桨叶顶或边距顶，其值为>= 50px。(或玩不同的价值观)
The basic bootstrap navbar takes height around 40px. So if you give a padding-top or margin-top of 50px or more, you will always have that breathing space between your container and the navbar.
基本bootstrap导航条的高度大约为40px。所以如果你给一个50像素或者更多的挡板，你的容器和导航条之间就会有呼吸空间。
#5
6
I too have had this problem but solved it without script and only using CSS. I start by following the recommended padding-top for a fixed menu by setting of 60px described on the Bootstrap website. Then I added three media tags that resize the padding at the cutoff points where my menu also resizes.
我也遇到过这个问题，但是没有脚本，只用CSS就解决了。首先，我按照推荐的步骤设置引导网站上描述的60px的固定菜单。然后我添加了三个媒体标签，在我的菜单也调整大小的截止点调整填充。
body{
padding-top:60px;
}
/* fix padding under menu after resize */
@media screen and (max-width: 767px) {
body { padding-top: 60px; }
}
@media screen and (min-width:768px) and (max-width: 991px) {
body { padding-top: 110px; }
}
@media screen and (min-width: 992px) {
body { padding-top: 60px; }
}
One note, when my menu width is between 768 and 991, the menu logo in my layout plus the
options cause the menu to wrap to two lines. Therefore, I had to adjust the padding-top to prevent the menu from covering the content, hence 110px.注意，当我的菜单宽度在768到991之间时，我的布局中的菜单标志加上
选项将导致菜单收缩为两行。因此，我不得不调整拨片顶部以防止菜单覆盖内容，因此是110px。
选项将导致菜单收缩为两行,因此,我不得不调整拨片顶部以防止菜单覆盖内容,因此是110 px。
Hope this helps...
希望这有助于……
#6
5
I know this thread is old, but i just got into that exactly problem and i fixed it by just using the page-header class in my page, under the nav. Also i used the tag instead of
我知道这个线程是旧的，但是我刚刚遇到了那个问题，我通过使用页面标题类来修复它，在nav下。我也使用了
标签而不是
，但我不确定它是否会表现出任何不同的行为。
Using the page-header as a container for the page, you won't need to mess with the
, only if you disagree with the default space that the page-header gives you.使用页面头作为页面的容器，您不需要打乱，除非您不同意页面头提供的默认空间。
Registration form A Bootstrap template showing a registration form with standard fields
Enter Name
Enter Email
Confirm Email
Enter Message
#7
0
i solved it using jquery
我用jquery解出来的
$(document).ready(function(e) {
var h = $('nav').height() + 20;
$('body').animate({ paddingTop: h });
});
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
