CSS Twitter Bootstrap 网格垂直对齐底部

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12847103/
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-08-29 20:28:10  来源:igfitidea点击:

Twitter Bootstrap grid Vertical align bottom

csstwitter-bootstrap

提问by John Quinones

So I have been at this what seems forever and can't figure it out. I have a grid with content of different heights due to images, and I am trying to get them all to align bottom but have had no luck. I have tried what I have seen on here, but nope, commented in my jsfiddle

所以我一直在这似乎永远无法弄清楚。由于图像,我有一个包含不同高度内容的网格,我试图让它们全部对齐底部但没有运气。我已经尝试了我在这里看到的内容,但是没有,在我的 jsfiddle 中评论

http://jsfiddle.net/qXT6K

http://jsfiddle.net/qXT6K

回答by tuff

Here's an updated version of your fiddle with (what I think) you want: http://jsfiddle.net/qXT6K/34/

这是您想要的(我认为的)小提琴的更新版本:http: //jsfiddle.net/qXT6K/34/

You were on the right track with position: absolute; bottom: 0;; it's just a matter of getting the offsets right.

你在正确的轨道上position: absolute; bottom: 0;;这只是让偏移量正确的问题。

I have given the container div a height just to show the bottom-alignment. You do need to give it a height, otherwise with all its children absolutely positioned, it will default to 0.

我给容器 div 一个高度只是为了显示底部对齐。你确实需要给它一个高度,否则它的所有孩子绝对定位,它会默认为 0。

To center the container div (and so have all its children appear centered), you need to use margin-left: autoand margin-right: auto(shorthand margin: 0 auto), plus a set width on the div (applied through the class span8in my example), plus removal of the floatproperty which is bundled into all span-classed elements. You also need padding-right: 40pxto center the container's children, accounting for the margin-left: 20pxwhich is also applied to .span-s.

要使容器 div 居中(使其所有子项都居中),您需要使用margin-left: automargin-right: auto(简写margin: 0 auto),加上 div 上的设置宽度(span8在我的示例中通过类应用),加上删除float捆绑的属性进入所有span-分类元素。您还需要padding-right: 40px将容器的子项居中,以考虑margin-left: 20px也适用于.span-s 的 。

回答by Deleteman

Is this what you want? http://jsfiddle.net/UxYnV/

这是你想要的吗?http://jsfiddle.net/UxYnV/

UpdateNow elements are centered: http://jsfiddle.net/UxYnV/2/

立即更新元素居中:http: //jsfiddle.net/UxYnV/2/