如何使用引導程序使我的橫幅響應

Question

我正在嘗試制作一個看起來像這樣的橫幅

在移動設備中它應該是這樣的

我在這個項目中使用引導程序。 我能夠在 web 視圖中實現這一點，但在移動設備中它不能很好地工作。

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <div style="background-color:#BBD4FD"> <div class="container"> <div class="row block"> <div class="row-md align-items-center pt-4" style="height: 100px;"> <h1 class="text-center" style="letter-spacing: .1rem; font-size: 4rem; color:#183C77">Know how DrinkPrime solves the problem</h1> </div> <div class="row"> <div class="col-md align-items-center one" style=" height: 400px; width: 100%;"> <div class="text-center">One of three columns</div> </div> <div class="col-md one" style="height: 400px; width: 100%;"> <div class="text-center">One of three columns</div> </div> <div class="col-md " style="height: 400px; width: 100%;"> <div class="text-center">One of three columns</div> </div> </div> </br> </div> </div> </div>

如何使這種響應式並看起來像移動視圖？

Answer 1

由於您使用的是 Bootstrap 的網格系統，因此刪除內聯 css <style=" height: 400px; width: 100%;">因為您重新定義了寬度，因此您的引導程序調整大小將被覆蓋。

我們使用引導程序類，以便 css 庫為我們處理調整大小。 你不需要覆蓋。

在此處查看響應式設計 - https://getbootstrap.com/docs/4.1/layout/grid/

Answer 2

你有幾個問題需要解決。

1. 不要在布局庫的元素上放置寬度。 這只是違反了布局庫的整體理念。 始終假設庫有實現目標的方法，並在文檔中查找。

2. 你有奇怪的嵌套行。 在打開另一個之前一定要關閉一個。

3. 你必須有一個奇怪的收線突破標簽（這實際上不是一個件事- br標簽是自閉）。 不要在布局中使用換行符。 使用邊距或其他結構機制。

解決這些問題，你的狀態就很好。 請注意，我已經添加了border-bottom類作為自定義的起點。 邊界文檔

 .height-100 { min-height: 100px; } h1.styled { letter-spacing: .1rem; font-size: 2rem; color: #183C77; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <div style="background-color:#BBD4FD"> <div class="container"> <div class="row"> <div class="align-items-center pt-4"> <h1 class="text-center styled">Know how DrinkPrime solves the problem</h1> </div> </div> <div class="row"> <div class="col-md height-100 border-bottom align-items-center"> <div class="text-center">One of three columns</div> </div> <div class="col-md height-100 border-bottom"> <div class="text-center">One of three columns</div> </div> <div class="col-md height-100 border-bottom"> <div class="text-center">One of three columns</div> </div> </div> </div> </div>