以桌面為中心在移動設備中擠壓列內容

Question

我正在構建一個響應式網站，我想將一些文本和圖像垂直和水平居中放置在一個最小高度的 div 中（頂部和底部有很多空白區域）。

我正在使用行和列來執行此操作：

 .row{ background-color: rgb(120,120,120); min-height: 300px; } .imgclass{ min-height: 100px; } .row .col-md-5{ border: 2px solid black; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <div>Previous Section</div> <div class="row justify-content-center align-items-center g-0"> <div class="imgclass col-md-5 m-0 p-0 text-center"> <img src="/img/body.png" alt="body_img"> </div> <div class="col-md-5 m-0 p-0 text-left"> <div> Some text </div> <div> Some other text </div> </div> </div> <div>Next Section</div>

在桌面模式下，一切看起來都很好，圖像和文本並排並居中，周圍有很多空間。

但是，在移動中，兩列之間存在很大的差距。 我想將列擠在一起，以便頂部和底部的空間相等，但圖像和文本之間的空間不大。

如何實現這種響應行為？

我添加了一個代碼片段。 如果您展開代碼段窗口，您將看到桌面模式，沒有問題。 但是，在較小的窗口中，列相互堆疊，它們之間存在間隙。 我想縮小這個差距。

Answer 1

輕松修復：將flex-column flex-XX-row添加到您的.row ，其中 XX 可以是更適合您的任何內容， md ， lg等...

 .row { background-color: rgb(120, 120, 120); min-height: 300px; } .row .col-md-5 { border: 2px solid black; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <div>Previous Section</div> <div class="row flex-column flex-lg-row justify-content-center align-items-center g-0"> <div class="imgclass col-md-5 m-0 p-0 text-center"> <img src="https://picsum.photos/200" alt="body_img"> </div> <div class="col-md-5 m-0 p-0 text-left"> <div> Some text </div> <div> Some other text </div> </div> </div> <div>Next Section</div>