我獲得了一個混合了 bootstrap(5) 和 html 代碼的網路應用程式的所有權。問題是如果我嘗試使用col-md-offset-4它來推送一個列根本不起作用。
不僅僅是 col-md-offset-4，任何 col-md-offset-* 都不起作用。
<div class="container">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3 ">.col</div>
<div class="col-sm-3 ">.col</div>
<div class="col-sm-3 ">.col</div>
<div class="col-sm-3 ">.col</div>
</div>
</div>
uj5u.com熱心網友回復：
語法略有不同：請參閱此處的語法是
[class*=col-] {
background: yellow;
margin: 2px;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT" crossorigin="anonymous">
<div class="container">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3 ">.col</div>
<div class="col-sm-3 ">.col</div>
<div class="col-sm-3 ">.col</div>
<div class="col-sm-3 ">.col</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>uj5u.com熱心網友回復：
我有類似的問題，花了一整天的時間來弄清楚發生了什么。
就我而言，我在 bootstrap 5 中使用了bootstrap 3 類。雖然版本 5 中有大量版本 3 作業，但其中一些包括 col-md-offset-* 沒有作業。
事實證明，他們以某種方式決定**rename these classes to offset-sm-***
沒有 col 前綴。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507461.html