將圖像與引導程序 4 中的列並排對齊

Question

我正在使用 Bootstrap 4，並嘗試對齊我的列，以便在中等或較大的視口上有 2 個彼此相鄰的圖像，但它們會保持一個在另一個頂部對齊。

<div class="row">
                        <div class="col-6">
                            <img class="img-fluid"
                                src="img/1.PNG">
                        </div>
                        <div class="col col-5 d-none d-md-block">
                            <img class="img-fluid"
                                src="img/2.PNG">
                        </div>

                    </div>

代碼和示例的圖像

Answer 1

如果您從 Row 類中取出所有額外的位並且只設置class="row"您的列寬都設置為5 ，那么這應該可以正常工作，但6是居中的理想選擇。

為了幫助編寫更流暢的代碼，在img類上嘗試將其全部刪除，除了img-fluid

Answer 2

你的列類是錯誤的。 col填充所有可用空間， col-5在所有屏幕上占據 5 列。 在這種情況下，您的col-5無論如何都會覆蓋您的col 。 你實際需要做的：

• 在兩個圖像上使用col-md-6代替col col-5 。 您的圖像將從中向上並排對齊。

此外，您不需要將d-none d-md-block到父類和所有子類。 如果您不想在小於 md 的時間內顯示特定的 div，則在父級上使用它就足夠了。

Answer 3

出於演示目的，我繼續使用了一個我可以開始工作的虛擬圖像。 您的結構應如下所示。

 <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 class="row"> <div class="col-6 col-lg-6 col-sm-6"> <img src="https://dummyimage.com/600x400/000/fff"> </div> <div class="col-6 col-lg-6 col-sm-6"> <img src="https://dummyimage.com/600x400/000/fff"> </div> </div>

使用不同的大、中和小引導類允許您的行在不同的屏幕尺寸上進行調整，同時保持該行結構。 這里的這個鏈接對學習系統也很有幫助。