Bootstrap 響應式網格系統

Question

我正在制作一個包含一些文本的部分，但我需要該部分右半部分的文本，左側有該部分的背景圖像，所以我為未使用的一半制作了 col-md-4，因為我不不想把背景圖片和col-md-8隱藏到文本中，如何在小屏幕上隱藏col-md-4部分，讓col-md-8覆蓋整個部分？ 我正在使用引導程序 5

代碼：

 <.-- Bootstrap 4.1:x/Twitter Library --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <!-- Body --> <div class="header-main row"> <div class="col-md-4"></div> <div class="col-md-8 text-center d-flex flex-column justify-content-center align-items center"> <h1 class="first-font">MOBI TECH</h1> <h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2> <a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a> </div> </div>

桌面上的 output：

手機上的 output：

Answer 1

要隱藏特定屏幕斷點上的元素，請使用.d-sm-none.d-md-block

 <.-- Bootstrap 4.1:x/Twitter Library --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <.-- Body --> <div class="header-main row"> <div class="col-md-4 .d-sm-none .d-md-block"></div> <div class="col-md-8 col-sm-12 text-center d-flex flex-column justify-content-center align-items center"> <h1 class="first-font">MOBI TECH</h1> <h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2> <a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a> </div> </div>

這將保留您為md屏幕定義的布局並隱藏第一個 div 並使第二個 div 在sm屏幕上寬12 cols 。