如何在Bootstrap 3中的可變文本下水平對齊按鈕
[英]How to align buttons horizontally under variable text in Bootstrap 3
問題描述
如何在Bootstrap 3中的可變文本下對齊按鈕？ 如果全屏運行代碼示例，您將看到三個按鈕沒有水平對齊。
當前行為：
我希望三個藍色按鈕在水平方向對齊。
- 此外，在Xs和Sm縮放中，使按鈕居中而不是左對齊將是神話般的。 我不想訴諸使用
<br>間隔符。
我該如何解決？ 感謝所有的幫助和建議。
預期結果：
當前行為：代碼示例（命中擴展片段）
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title Page</title> <!-- Bootstrap CSS --> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div> <div class="col-md-4"> <h3><b>penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <div> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details >></a> </div> </div> <div class="col-md-4"> <h3><b>sociis penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p> <div> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a> </div> </div> <div class="col-md-4"> <h3><b>Morbi penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <div> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a> </div> </div> </div> </div> <!-- jQuery --> <script src="//code.jquery.com/jquery.js"></script> <!-- Bootstrap JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
4 個解決方案
解決方案1
2 已采納 2018-11-28 07:04:29
我已經對已經制成的HTML結構使用了2個自定義類。\\
父div的三節課
將text-sm-center類添加到按鈕父div。
這是解決方案列表：
按鈕對齊解決方案：
根據您的最長段落為該段落指定最小高度。
.three-section p {
min-height: 160px
}
將按鈕在xs和sm中居中對齊的解決方案：
使用類別名稱text-sm-center編寫一個媒體查詢，以將其應用於按鈕代碼div，並使段落高度自動變為不遵循前面給出的最小高度。
@media (max-width: 767px) {
// Align text to center.
.text-sm-center {
text-align: center;
}
.three-section p {
min-height: inherit;
}
}
.three-section p { min-height: 160px } @media (max-width: 1260px) { .three-section p { min-height: 200px } } @media (max-width: 962px) { .three-section p { min-height: inherit; } .text-sm-center { text-align: center; } }
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title Page</title> <!-- Bootstrap CSS --> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="three-section"> <div class="col-md-4"> <h3><b>penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <div class="text-sm-center"> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details >></a> </div> </div> <div class="col-md-4"> <h3><b>sociis penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p> <div class="text-sm-center"> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a> </div> </div> <div class="col-md-4"> <h3><b>Morbi penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <div class="text-sm-center"> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a> </div> </div> </div> <!-- jQuery --> <script src="//code.jquery.com/jquery.js"></script> <!-- Bootstrap JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
解決方案2
1 2018-11-28 06:43:42
將min-height添加到相應的p元素。
嘗試這個
p{min-height:160px;}
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title Page</title> <!-- Bootstrap CSS --> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div> <div class="col-md-4"> <h3><b>penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <div> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details >></a> </div> </div> <div class="col-md-4"> <h3><b>sociis penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p> <div> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a> </div> </div> <div class="col-md-4"> <h3><b>Morbi penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <div> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a> </div> </div> </div> </div> <!-- jQuery --> <script src="//code.jquery.com/jquery.js"></script> <!-- Bootstrap JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
解決方案3
0 2018-11-28 06:45:40
.col-md-4 { display: flex; flex-direction: column; height:20em; } .col-md-4 > p { flex:1 0 auto; }
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title Page</title> <!-- Bootstrap CSS --> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div> <div class="col-md-4"> <h3><b>penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <div> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details >></a> </div> </div> <div class="col-md-4"> <h3><b>sociis penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p> <div> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a> </div> </div> <div class="col-md-4"> <h3><b>Morbi penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <div> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a> </div> </div> </div> </div> <!-- jQuery --> <script src="//code.jquery.com/jquery.js"></script> <!-- Bootstrap JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
解決方案4
0 2018-11-28 07:09:40
我為您的查詢嘗試了一些解決方案。 在類和CSS上進行一些調整
.row-eq-height { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col-eq-height{display:flex;flex-flow: column;} .mt-auto{margin-top:auto;}
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title Page</title> <!-- Bootstrap CSS --> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="row row-eq-height"> <div class="col-md-4 col-eq-height"> <h3><b>penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <div class="mt-auto"> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details >></a> </div> </div> <div class="col-md-4 col-eq-height"> <h3><b>sociis penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p> <div class="mt-auto"> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a> </div> </div> <div class="col-md-4 col-eq-height"> <h3><b>Morbi penatibus</b></h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <div class="mt-auto"> <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a> </div> </div> </div> </div> <!-- jQuery --> <script src="//code.jquery.com/jquery.js"></script> <!-- Bootstrap JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
如何使Twitter和Facebook按鈕在水平方向對齊？
[英]How can I get the Twitter and Facebook buttons to horizontally align?
如何將Bootstrap輸入組中的水平字段與IE中的顏色選擇器的插件對齊？
[英]How to align horizontally fields in Bootstrap input group with addons for colorpicker in IE?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.