css - Bootstrap 4 のレスポンシブな「メディア」

Question

私はこのコードを書きました：

      <div class="media text-xs-left">
        <div class="media-left media-middle">
          <p class="lead">
            <img src="default.jpg">
          </p>
        </div>
        <div class="media-body">
          <p class="lead">
            <h6>here text</h6>
          </p>
        </div>
      </div>

サイトをフル ウィンドウで開くとすべて問題ありませんが、ウィンドウのサイズを変更して携帯電話でどのように表示されるかを確認すると、メディア オブジェクトが反応しません。小さい画面のデバイスで画像の下にテキストを表示したい。それを行う方法を教えてください。

Answer 1

@media screen and (max-width : 768px){

}

そのタグ内の css を変更します。たとえば、次のようになります。

@media screen and (max-width : 768px){
    .lead{
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    }
}