因此，在深入探討這個問題之前，我想指出一些簡單的要求，即如果可能的話，我希望如何實現這一目標。a) 因為我正在修改使用 Bootstrap 3 的 Woocommerce 模板，所以我不能簡單地切換到 Bootstrap 4，即使最新版本確實對我有很大幫助。b) 我可以使用任何技術或自定義代碼，只要它可以正常工作，即使它超出了 Bootstrap 3 框架范圍。所以這是小提琴： https: //jsfiddle.net/wL1kjc0y/我還想讓這個產品列表更有趣，例如，對于奇怪的項目，我想讓產品名稱、文本、按鈕浮動到右側，以便產品圖像出現在左側，并且幾乎對于甚至項目也是如此 - 圖像浮動到右側，文本內容浮動到左側。我為文本內容創建了 div.col-lg-6 元素，為圖像創建了 col-lg-6 元素。問題是，如果我將 .pull-right 類應用于包裝 Product 內容的 div.col-lg-6 元素，則 .pull-right 類不起作用。而且因為 Bootstrap 3 不使用 Flexbox，我添加了以下代碼：.d-flex {    display: flex !important; }到包裹兩列的元素，以便文本垂直居中正常工作。我發現浮動：對；不適用于彈性元素。所以我不確定是否可以做我想做的事情，如果刪除 .d-flex 類定義，一切都會正常，然后我可以使用 .pull-right 類，但文本不會垂直居中。您可以看一下刪除 .d-flex 并將 .pull-right 類應用于第一項的示例，它按預期工作： https: //jsfiddle.net/7guxfa5o/1/所以最后看起來我有兩個不完整的選擇：讓需要向右浮動但垂直居中不起作用的列，或者在無法浮動列的情況下進行垂直居中。您可以忽略那里的 JavaScript 部分，因為它主要用于檢測瀏覽器窗口大小是否為中等大小，然后應用一些格式、樣式規則。任何可行的替代方法或任何我可以嘗試的建議都將非常感激。