twitter-bootstrap div 不会将自身定位在引导程序固定导航栏下方

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19204937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:45:41  来源:igfitidea点击:

div doesn't position itself below bootstrap fixed navbar

htmlcsstwitter-bootstrap

提问by adit

I have been using bootstrap's navbar css. Below this navbar I have a which I want to put below the navbar. However, why does it always start at the top and not below the navbar? I've looked at twitter bootstrap's example and they were able to have a positioned below the fixed navbar. Here's the link to my website. Any idea why this is?

我一直在使用引导程序的导航栏 css。在这个导航栏下方,我有一个我想放在导航栏下方的。但是,为什么它总是从顶部而不是导航栏下方开始?我查看了 twitter bootstrap 的示例,他们能够在固定导航栏下方放置一个位置。这是我网站的链接。知道这是为什么吗?

Here's the html that I have now:

这是我现在拥有的 html:

<div class="navbar navbar-fixed-top">
</div>

<section id="main">

</section>

回答by Chokchai

The fixed navbarwill overlay your other content, unless you add paddingto the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

fixed navbar将覆盖其他内容,除非你添加 padding到的顶部<body>。尝试您自己的价值观或使用我们下面的代码片段。提示:默认情况下,导航栏高 50 像素。

body { padding-top: 70px; }

确保在核心 Bootstrap CSS 之后包含它。

ref: http://getbootstrap.com/components/#navbar-fixed-top

参考:http: //getbootstrap.com/components/#navbar-fixed-top

I dont know why they dont put this note in bootstrap 2.3.2 but this is what you want. :)

我不知道他们为什么不把这个注释放在 bootstrap 2.3.2 中,但这就是你想要的。:)

回答by Anirudha Gupta

Yesterday I fix my navbar and set the container as following

昨天我修复了我的导航栏并将容器设置如下

.maincontainer{ padding-top: 75px; }

75 pixel is enough and doesn't affect Bootstrap on Responsive design in Tablet and Mobile. Work perfect everywhere :)

75 像素就足够了,并且不会影响平板电脑和手机中响应式设计的 Bootstrap。处处完美工作:)

回答by rsa

Just use the <nav>tag instead of <div class="nav">. It'll take care of it.

只需使用<nav>标签而不是<div class="nav">. 它会照顾它。