引导 3 框布局无响应

Question

I am trying to make a bootstrap4 layout that has 3 boxes side by side on a wide screen, but if the screen gets thinner I want the red/green boxes to always stay next to each other, and the far right blue box to move below the first two boxes like so in this pic:

I'm new to the bootstrap4 column layout, and I've been working on trying to achieve this but my current work in progress code does not have the responsiveness I want:

 <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>

Any help much appreciated, thanks

Answer 1

You can add multiple col-* classes to your elements. This way you can set multiple different layouts for different screen sizes.

For example, you'll want 2 columns side by side and 1 full width on smaller screens. Bootstrap is considered mobile first so start off with the smaller layouts and work your way up. The smallest screen columns are defined with col-* (without any sm or md , etc).

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

The two columns will each be 1/2 starting from the smallest screen size to the largest. The third div will be 1/1 of the width. Now to make your layout more complex, you can added classes to the elements, like having them become 1/3 of the width of a row on a larger screen.

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

This will put all three columns in a single row on larger screens. They are all 1/3 the width so they will fit together. Note that col-12 has been removed. This is because col-md-4 will imply the usage of col-12 when the screen is smaller than its breakpoint.

 <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>

If you have any questions, please comment below.