Html 如何在引导程序中对齐一行 div 的底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21703382/
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
How align to bottom a row div in bootstrap?
提问by Riccardo
I'm trying to align to bottm my row div or anyway tha last element. I'm using bootstrap 3 and I have:
我正在尝试对齐到我的行 div 或最后一个元素。我正在使用引导程序 3，我有：
<div id="main">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="logo col-centered">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 title text-center">THE TITLE</div>
</div>
<div class="row">
<div class="col-md-5 col-centered text-center description">Lorem ipsum</div>
<div class="description_arrow col-centered"></div>
</div>
<div class="row">
<div class="col-md-5 col-sm-8 col-xs-12 col-centered">
<div class="image-container">
<img id="image-phone" src="img/image-phone.png" class="img-responsive" style="bottom:0px;">
</div>
</div>
</div>
</div>
</div>
In the css I have:
在css中我有：
#main {
min-height: 100%;
}
Now It look so:
现在看起来是这样：
|------------------------|
|==========ROW===========|
|==========ROW===========|
|==========ROW===========|
|==========SPACE=========|
|==========SPACE=========|
|------------------------|
I want that look so: Now It look so:
我想要这样的样子：现在看起来这样：
|------------------------|
|==========ROW===========|
|==========ROW===========|
|==========SPACE=========|
|==========SPACE=========|
|==========ROW===========|
|------------------------|
So I want keep the last row in the bottom, how I can do ?
所以我想将最后一行保留在底部，我该怎么办？
EDIT: I can't use margin-bottom on the 2° div, because the distance between the 2° row div and the last row div, can change, and I don't want and high value, because then on 13" screen the page became scrollable.
编辑：我不能在 2° div 上使用 margin-bottom，因为 2° 行 div 和最后一行 div 之间的距离可以改变，而且我不想要高值，因为然后在 13" 屏幕上页面变得可滚动。
EDIT2: I can't use position: fixed and bottom: 0, because under div #main, I have other div(always 100% height).
EDIT2：我不能使用位置：固定和底部：0，因为在 div #main 下，我有其他 div（总是 100% 高度）。
WORKAROUND 1:I do so:
解决方法 1：我这样做：
<div id="main" style="position: relative;">
And in the row div class I do:
在行 div 类中，我这样做：
<div class="row" style="position:absolute; bottom: 0px; width: 100%;">
Seems works really fine, but I don't know if it's a good solution or not...please give me a feedback!
看起来效果很好，但我不知道它是否是一个好的解决方案...请给我反馈！
回答by Whoa
If I understand correctly - can't you just add margin-bottomto the second row to create the vertical space between the second and third row?
如果我理解正确 - 你不能添加margin-bottom到第二行来创建第二行和第三行之间的垂直空间吗？
Also note that col-12's can just be divs inside a container, they don't need a row or the col-12 class.
另请注意，col-12's 可以只是容器内的 div，它们不需要行或 col-12 类。
回答by Pizza lord
I prefer creating a spacerclass like this:
我更喜欢创建这样的spacer类：
.spacer{
height: height in %;
}
Then just add the spacerclass like this:
然后只需添加这样的spacer类：
<div class="row">
<div class="spacer">
<div class="row">
That way, you can easily have a space between rows that is responsive.
这样，您可以轻松地在行之间留出一个响应空间。
EDIT:
编辑：
if you have a page that is not higher then 1280px you can try it makes the last row stick to the bottom of the page
如果您的页面不高于 1280 像素，您可以尝试将最后一行粘到页面底部
.row:last-child {
position: fixed;
bottom: 0;
}
回答by MrMaavin
A solution is if you add to the divwith the class container the classes d-flex, flex-columnand h-100.
一个解决方案是，如果你加入到div与类容器类d-flex，flex-column和h-100。
Then you need to at mt-autoto the last row. That will add a margin to all the space that is left on the screen. So this works on all screensizes.
然后你需要到mt-auto最后row。这将为屏幕上剩余的所有空间添加一个边距。所以这适用于所有屏幕尺寸。
Also important is that the html, the bodyand all elements above the divwith the class containeruse the full height. You can achieve this with the following css:
同样重要的是，html中，body上面的所有元素div与类container使用完整的高度。您可以使用以下 css 实现此目的：
html, body {
height: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
html, body, #main {
height: 100%;
}
</style>
<div id="main">
<div class="container-fluid d-flex flex-column h-100">
<div class="row">
<div class="col-md-12">
<div class="logo col-centered">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 title text-center">THE TITLE</div>
</div>
<div class="row">
<div class="col-md-5 col-centered text-center description">Lorem ipsum</div>
<div class="description_arrow col-centered"></div>
</div>
<div class="row mt-auto mb-3">
<div class="col-md-5 col-sm-8 col-xs-12 col-centered">
<div class="image-container">
<img id="image-phone" src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png" class="img-responsive" style="max-width: 100px; bottom:0px;">
</div>
</div>
</div>
</div>
</div>回答by Aitazaz Khan
Just add some margin between them by putting a div between that rows like <div class="top-buffer">and the css is here .top-buffer { margin-top:10px; }I hope it will work for you.
只需通过在这些行之间放置一个 div 来在它们之间添加一些边距，就像<div class="top-buffer">这里的 css.top-buffer { margin-top:10px; }我希望它对你有用。
