Html 容器外的 Bootstrap 布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32403991/
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 layout outside of container
提问by Ivanka Todorova
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
我想将 Twitter Bootstrap 用于一个布局有点疯狂的项目。
The logo's background should start from the edge of the window, but the text in the logo should start where the .containerbegins.
Crazy, huh!
徽标的背景应从窗口边缘开始，但徽标中的文本应从窗口边缘.container开始。疯了吧！
I'm not sure how to explain this so I drew it!
我不知道如何解释，所以我画了它！
What I've done so far is this:
到目前为止我所做的是：
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo@jsFiddle.
我创建了一个demo@jsFiddle。
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
我应该如何构建我的 HTML，或者我可以用 CSS 做什么来实现这种效果。
CSS only solutions if possible.
如果可能，仅 CSS 解决方案。
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
编辑：那些标题元素可能会再次出现在页面上，因此基于该元素将位于页面顶部这一事实的解决方案不是我所追求的。
回答by Yandy_Viera
First of all you have to take into account Grid System Rules:
首先，您必须考虑网格系统规则：
Some Bootstrap grid system rules:
- Rows must be placed within a
.container(fixed-width) or.container-fluid(full-width) for proper alignment and padding- Use rows to create horizontal groups of columns
- Content should be placed within columns, and only columns may be immediate children of rows
- Predefined classes like
.rowand.col-sm-4are available for quickly making grid layouts- Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on.rows- Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three.col-sm-4
一些 Bootstrap 网格系统规则：
- 行必须放置在
.container（固定宽度）或.container-fluid（全宽）内才能正确对齐和填充- 使用行创建水平列组
- 内容应该放在列中，只有列可以是行的直接子项
- 预定义类喜欢
.row和.col-sm-4可用于快速进行网格布局- 列通过填充创建装订线（列内容之间的间隙）。该填充通过
负边距在第一列和最后一列的行中偏移.rows- 网格列是通过指定要跨越的 12 个可用列的数量来创建的。例如，三个相等的列将使用
三个.col-sm-4
So following the above rules you can achieve what you want like this:
因此，遵循上述规则，您可以像这样实现您想要的：
Here a working JSFiddlefork from yours
这是你的一个有效的JSFiddlefork
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>You can change the #in col-xs-Xas you wish to obtain your desire layout but always trying to follow the above rules.
您可以更改col-xs- X 中的#以获得所需的布局，但始终尝试遵循上述规则。
回答by indubitablee
would something like this work? http://jsfiddle.net/swm53ran/312/
像这样的工作吗？http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
如果你想看看结构如何一遍又一遍地发生，你可以像这个小提琴一样添加分段的div：http: //jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
回答by Austin Kregel
I recommend making the following changes.
我建议进行以下更改。
- Start by making a
.container-fluid - Then move your
.containerinto your.container-fluid - lastly, move your header above your
.container, but inside your.container-fluid
- 首先制作一个
.container-fluid - 然后将你的移动
.container到你的.container-fluid - 最后，将您的标题移到您的上方
.container，但在您的内部.container-fluid
Once complete it should look something like.
完成后，它应该看起来像。
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
回答by Pluto
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
回答by John
Use the grid system to isolate header and body:
使用网格系统隔离 header 和 body：
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
回答by Chris Yongchu
Use .container-fluidfor the content you want to be full width instead of the fixed-width that comes with .container.
使用.container-fluid你想成为全宽，而不是自带的固定宽度的内容.container。
Per Bootstrap:
每个引导程序：
- Rows must be placed within a
.container(fixed-width) or.container-fluid(full-width) for proper alignment and padding.
- 行必须放置在
.container（固定宽度）或.container-fluid（全宽）内，以便正确对齐和填充。
If you want container-fluidto go the absolute edge of the window, you can set padding: 0;like:
如果你想走container-fluid窗口的绝对边缘，你可以设置padding: 0;如下：
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/(I put a border around .containerso you can see the div.
这是一个小提琴演示供您查看。http://jsfiddle.net/xsqezfro/（我在周围放了一个边框，.container以便您可以看到 div。
