twitter-bootstrap Bootstrap 容器-流体和容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17749653/
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
Bootstrap container-fluid and container
提问by Kach
I am designing a website using twitter bootstrap. Everything is working fine except the header area.
我正在使用 twitter bootstrap 设计一个网站。除了标题区域外，一切正常。
I have used .container-fluid to set the full-width background. And used .container to put the contents within 960px. But the problem is with the logo background. I want logo background area to fill out the left area outside the .container class. Is it possible?
我使用 .container-fluid 来设置全角背景。并使用 .container 将内容放在 960px 以内。但问题在于徽标背景。我希望徽标背景区域填充 .container 类之外的左侧区域。是否可以？
Here is my markup -
这是我的标记 -
<div class="container-fluid full-width">
<div class="row-fluid header-top">
<div class="container">
<div class="span4 logo-area">
<div class="logo">
<h1> <a href=""> hello.</a></h1>
</div>
</div>
<div class="menu span8">
<div class="navbar">
<ul class="nav" id="nav">
<li><a href="#"> Home </a></li>
<li><a href="#"> Menu Item2 </a></li>
<li><a href="#"> Menu Item3 </a></li>
<li><a href="#"> Menu Item4 </a></li>
<li><a href="#"> Menu Item5 </a></li>
<li><a href="#"> Menu Item6 </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
提前致谢。
回答by feitla
It is, but you will need to remove it from the flow of the container either by placing it outside of it, or using CSS to control it by giving it position:absoluteetc.
是的，但是您需要将其从容器流中移除，方法是将其放置在容器外部，或者使用 CSS 来控制它，方法是给它position:absolute等。
Something like:
就像是：
<div class="logo">
<h1> <a href=""> hello.</a></h1>
</div>
<style>
.logo {
position:absolute;
top:100px;
left:100px;
}
</style>
<div class="container-fluid full-width">
<div class="row-fluid header-top">
<div class="container">
<div class="menu span8">
<div class="navbar">
<ul class="nav" id="nav">
<li><a href="#"> Home </a></li>
<li><a href="#"> Menu Item2 </a></li>
<li><a href="#"> Menu Item3 </a></li>
<li><a href="#"> Menu Item4 </a></li>
<li><a href="#"> Menu Item5 </a></li>
<li><a href="#"> Menu Item6 </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
回答by Mike Phils
I think you don't want to use position:absolute property.However you can't make your logo background area to fill out the left area outside the .container class.Because whatever you do it will remain inside .container class. The only way is to either you make the position:absolute or move the your .logo class outside of .container class(just above the the .container class).
我认为您不想使用 position:absolute 属性。但是，您不能让徽标背景区域填充 .container 类之外的左侧区域。因为无论您做什么，它都会保留在 .container 类中。唯一的方法是要么使位置：绝对，要么将 .logo 类移到 .container 类之外（就在 .container 类之上）。
