我用這樣的div..
<div id="book" class="justify-content-center text-center">
這對于臺式機來說很好，但是在移動設備上我需要將文本向左對齊。我需要在我的媒體查詢中添加什么，以便在移動設備上保持文本左對齊？
@media only screen and (max-width: 480px) {
// What do I add here to "override" the text-center so that it align to left instead?
}
uj5u.com熱心網友回復：
看到這個：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
@media (max-width: 575.98px) {
.text-center {
text-align: left !important
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.text-center {
text-align: left !important
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.text-center {
text-align: left !important
}
}
</style>
<div id="book" class="justify-content-center text-center">test</div>
此代碼生成您期望的輸出。
您應該注意，這些 CSS 位于 bootstrap 標記之后。
大螢屏的結果：
小螢屏的結果：
uj5u.com熱心網友回復：
解決方案：
不要覆寫引導類justify-content-center text-center。僅覆寫唯一的 ID 簿。
@media only screen and (max-width: 480px) {
#book{
float:left;
}
}<div id="book" class="justify-content-center text-center">
Test Text
</div>
uj5u.com熱心網友回復：
如果您使用的是 Bootstrap SASS，那么結合 2 個 Bootstrap 類來創建一個可以完成您的作業的新類可能是一個更好的選擇。考慮以下：
.text-sm-left-md-right { // Give whatever name you want
@extend .text-start; // or text-left if B4
@extend .text-md-end; // or text-right if B4.
}
上面將有一個文本在小螢屏中向左對齊，然后從中等和上方向右對齊。這樣您就不必將元素的 ID 放在這里，并且可以根據需要多次重用該類。
uj5u.com熱心網友回復：
只需立即添加 css
@media only screen and (max-width: 480px) {
.text-center {
text-align: left !important;
}
}
但是您必須在引導程式之后匯入 CSS，否則引導程式將覆寫您的 CSS，而不是您覆寫它。但是還有其他解決方案寫
這意味著在sm螢屏寬度上，將 CSS 居中，并在sm
https://getbootstrap.com/docs/4.0/utilities/text/下方
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/413044.html
標籤：