twitter-bootstrap 使用 Bootstrap 的 CSS 相对定位和垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19101657/
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
CSS Relative Positioning and Vertical Alignment with Bootstrap
提问by victorhooi
I'm trying to convert a image mockup into HTML/CSS and I'm struggling to get things positioning correctly - in particular with vertical alignment, and with getting things to stay in relative position as you resize the window.
我正在尝试将图像模型转换为 HTML/CSS 并且我正在努力使事物正确定位 - 特别是垂直对齐，以及在调整窗口大小时让事物保持相对位置。
JSFiddle code:
JSFiddle 代码：
http://jsfiddle.net/victorhooi/ZcrCc/
http://jsfiddle.net/victorhooi/ZcrCc/
Full-screen JSFiddle output:
全屏 JSFiddle 输出：
http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/
http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/
I have this mockup:
我有这个模型：
But if you look at the JSFiddle above, I can't seem to get the opening and closing branches, along with the type images in the centre to be vertically aligned within the white box - they're everywhere.
但是，如果您查看上面的 JSFiddle，我似乎无法将打开和关闭的分支以及中心的类型图像在白框中垂直对齐 - 它们无处不在。
The HTML:
HTML：
<section id="proposal" class="backgroundphotos">
<div class="row">
<div class="col-md-10 col-md-offset-1 panel panel-default">
<div class="row">
<div class="col-md-1 col-md-offset-2">
<img src="http://www.victorandalpha.com/images/curly_brackets_open.png" />
</div>
<div class="col-md-2">
<img src="http://www.victorandalpha.com/images/proposal_01.png" />
<img src="http://www.victorandalpha.com/images/proposal_02.png" />
<img src="http://www.victorandalpha.com/images/proposal_03.png" />
</div>
<div class="col-md-2">
<img src="http://www.victorandalpha.com/images/proposal_04.png" />
<img src="http://www.victorandalpha.com/images/proposal_05.png" />
<img src="http://www.victorandalpha.com/images/proposal_06.png" />
</div>
<div class="col-md-2">
<img src="http://www.victorandalpha.com/images/proposal_07.png" />
<img src="http://www.victorandalpha.com/images/proposal_08.png" />
<img src="http://www.victorandalpha.com/images/proposal_09.png" />
</div>
<div class="col-md-1">
<img src="http://www.victorandalpha.com/images/curly_brackets_close.png" />
</div>
</div>
</div>
</div>
</section>
with the CSS:
使用 CSS：
.backgroundphotos {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: scroll; /* Why does this not carry over? */
min-height: 800px;
}
#proposal {
background: url(../img/04.jpg) no-repeat center center fixed;
background-attachment: scroll;
}
#proposal > div.row > div > div.row > div {
position: relative;
bottom: -90px;
}
#proposal > div.row {
position: relative;
bottom: -22.500em;
}
NB: I've edited the original question to split it into separate ones for the other CSS positioning issues. The related questions are here:
注意：我已经编辑了原始问题，将其拆分为其他 CSS 定位问题的单独问题。相关问题在这里：
CSS Positioning two elements relative to each other, and keeping there during resize
CSS Positioning for Glyphicon-based Navbar that Opens on Hover
采纳答案by aug
Will edit my answer when I have more time to check the other issues (you might want to consider making them separate questions) but for your first issue regarding the branches you shouldn't use bottom: -90px
当我有更多时间检查其他问题时将编辑我的答案（您可能需要考虑将它们分开问题）但是对于您不应该使用的分支的第一个问题 bottom: -90px
#proposal > div.row > div > div.row > div {
position: relative;
bottom: 0px; //changed from -90 to just 0
}
The branches were formatted perfectly but by doing this you made them shift down.
分支的格式很完美，但这样做会使它们向下移动。
The problem then though is the picture is aligned correctly. I added bottom: -40pxto the class .col-md-offset-2but that's bootstrap stuff so you probably don't want to edit that. Maybe make your own class so you can just directly add it or encapsulate all the .col-md-offset-2divs in a wrapper div that you can shift downward.
问题是图片对齐正确。我添加bottom: -40px到类中，.col-md-offset-2但这是引导程序，因此您可能不想编辑它。也许创建自己的类，以便您可以直接添加它或将所有.col-md-offset-2div封装在可以向下移动的包装 div 中。
