web-dev-qa-db-ja.com

Bootstrap 4レスポンシブスペースが機能しない

定義されたクラスを使用しています

レスポンシブブレークポイント{property} {sides}-{breakpoint}-{size} m（t、b、r、l、x、y）-（sm、md、lg、xl）-（0、 1、2、3、4、5）

その意味

<div class="col-12 mb-sm-3"></div>

小さいデバイスでは、底がマージンのあるdivを作成する必要がありますが、作成しません。

twitter-bootstrapbootstrap-4spacing
15
Luis Alves

何が起こっているのかわかった。 mb-sm-3は576pxの最小幅にのみ影響するため、モバイル、たとえばiphone 6では、min-widthは576未満です。

<div class="col-12 mb-3 mb-sm-0"></div>

これにより、sm未満（この場合はxs）に対して3のマージン下部が作成され、sm以上はゼロになります。

ご協力いただきありがとうございます。

28
Luis Alves

margin-bottom: 1rem!important;は.mb-sm-3に追加しています

これをチェックして

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-12 mb-sm-3" style="background:blue;height:20px;"></div>
<div>Space above is the margin of the `mb-sm-3`</div>
1
Znaneswar