[英]How align to bottom a row div in bootstrap?
我正在嘗試對齊到我的行 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>
在css中我有:
#main {
min-height: 100%;
}
現在看起來是這樣:
|------------------------|
|==========ROW===========|
|==========ROW===========|
|==========ROW===========|
|==========SPACE=========|
|==========SPACE=========|
|------------------------|
我想要這樣的樣子:現在看起來這樣:
|------------------------|
|==========ROW===========|
|==========ROW===========|
|==========SPACE=========|
|==========SPACE=========|
|==========ROW===========|
|------------------------|
所以我想將最后一行保留在底部,我該怎么辦?
編輯:我不能在 2° div 上使用 margin-bottom,因為 2° 行 div 和最后一行 div 之間的距離可以改變,而且我不想要高值,因為然后在 13" 屏幕上頁面變得可滾動。
EDIT2:我不能使用位置:固定和底部:0,因為在 div #main 下,我有其他 div(總是 100% 高度)。
解決方法 1:我這樣做:
<div id="main" style="position: relative;">
在行 div 類中,我這樣做:
<div class="row" style="position:absolute; bottom: 0px; width: 100%;">
看起來效果很好,但我不知道它是否是一個好的解決方案...請給我反饋!
一個解決方案是,如果您將類d-flex
、 flex-column
和h-100
類添加到帶有類容器的div
。
然后你需要在mt-auto
到最后row
。 這將為屏幕上剩余的所有空間添加一個邊距。 所以這適用於所有屏幕尺寸。
同樣重要的是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>
如果我理解正確的話 - 你不能在第二行添加margin-bottom
來創建第二行和第三行之間的垂直空間嗎?
另請注意, col-12
可以只是容器內的 div,它們不需要行或 col-12 類。
我更喜歡像這樣創建一個spacer
類:
.spacer{
height: height in %;
}
然后只需像這樣添加spacer
類:
<div class="row">
<div class="spacer">
<div class="row">
這樣,您可以輕松地在行之間留出一個響應空間。
編輯:
如果您的頁面不高於 1280 像素,您可以嘗試將最后一行粘到頁面底部
.row:last-child {
position: fixed;
bottom: 0;
}
只需通過在這些行之間放置一個 div 來在它們之間添加一些邊距,例如<div class="top-buffer">
並且 css 在這里.top-buffer { margin-top:10px; }
.top-buffer { margin-top:10px; }
我希望它會為你工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.