引導程序 - 列的垂直 alignment 不起作用
[英]Bootstrap - vertical alignment of columns does not work
問題描述
我正在學習引導程序，我似乎陷入了最基本的事情之一 - 垂直 alignment 列。 我試圖讓內容在頂部保持一致，但失敗得很慘。
我多次重寫我的代碼，但沒有得到任何結果。 我僅使用 bootstrap 文檔中的代碼創建了一個新的 html 文檔，但所有內容仍與文檔頂部對齊。 我在這里想念什么？
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container text-center"> <div class="row align-items-end"> <div class="col"> should be bottom - One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> </body> </html>
2 個解決方案
解決方案1
1 2022-08-31 18:06:11
為了對齊網格內的所有項目，我們有多個類。
1.所有item的文本都是以align-items-start
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container text-center"> <div class="row align-items-start"> <div class="col"> should be bottom - One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> </body> </html>
所有項目在中心垂直align-items-center class
``` <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container text-center"> <div class="row align-items-center"> <div class="col"> should be bottom - One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> </body> </html> ```
**所有文本元素將使用align-items-end class 在網格末尾對齊 **
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container text-center"> <div class="row align-items-end"> <div class="col"> should be bottom - One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> </body> </html>
你可以在這里看到所有的對齊類
https://getbootstrap.com/docs/5.0/utilities/flex/#align-items
解決方案2
0 2022-08-31 17:57:00
您正在 Bootstrap 中尋找align-items-start class 。
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container text-center vh-100"> <div class="row align-items-center h-100"> <div class="col"> should be bottom - One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> </body> </html>
垂直對齊在Bootstrap中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.