引導 3 框布局無響應

Question

我正在嘗試制作一個在寬屏幕上並排有 3 個框的 bootstrap4 布局，但是如果屏幕變薄，我希望紅色/綠色框始終彼此相鄰，最右邊的藍色框移動到下方在這張照片中，前兩個盒子是這樣的：

我是 bootstrap4 列布局的新手，我一直在努力實現這一目標，但我當前正在進行的工作代碼沒有我想要的響應能力：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <div style="background:red" class="col-md-3"> TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br> </div> <div style="background:green" class="col-md-3"> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> </div> <div style="background:blue" class="col-md-3"> TEXT3 <br> TEXT3 <br> TEXT3 <br> </div> </div> </div>

非常感謝任何幫助，謝謝

Answer 1

您可以向元素添加多個col-*類。 通過這種方式，您可以為不同的屏幕尺寸設置多種不同的布局。

例如，您需要 2 個並排的列和 1 個全寬在較小的屏幕上。 Bootstrap 被認為是移動優先的，所以從較小的布局開始，然后逐步向上。 最小的屏幕列用col-*定義（沒有任何sm或md等）。

<div class="col-6"></div>
<div class="col-6"></div>
<div class="col-12"></div>

從最小屏幕尺寸到最大屏幕尺寸，這兩列各為1/2 。 第三個 div 將是寬度的1/1 。 現在為了讓你的布局更復雜，你可以給元素添加類，比如讓它們在大屏幕上變成一行寬度的1/3 。

<div class="col-6 col-md-4"></div>
<div class="col-6 col-md-4"></div>
<div class="col-md-4"></div>

這會將所有三列放在更大的屏幕上的一行中。 它們都是寬度的1/3 ，因此它們可以組合在一起。 請注意， col-12已被刪除。 這是因為當屏幕小於斷點時col-md-4將暗示使用col-12 。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <div style="background:red" class="col-6 col-md-4"> TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br> </div> <div style="background:green" class="col-6 col-md-4"> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> </div> <div style="background:blue" class="col-md-3"> TEXT3 <br> TEXT3 <br> TEXT3 <br> </div> </div> </div>

如果您有任何問題，請在下方發表評論。