将图像与引导程序 4 中的列并排对齐

Question

I am using Bootstrap 4, and trying to align my columns so that I have 2 images next to each-other on medium or larger viewports, but they keep aligning themselves one on top of the other.

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

Image of code and example

Answer 1

That should work just fine if you take all the extra bits from the Row classes and just have class="row" Your column widths are both set to 5 though, 6 would be ideal for centering.

To assist with sleeker code, on the img classes try removing it all except for img-fluid

Answer 2

Your column classes are wrong. col fills all available space, and col-5 takes 5 columns on all screens. And in this case your col-5 is overriding your col anyway. What you actually need to do:

• Use col-md-6 on both the images in place of col col-5 . Your images will align themselves side by side from medium and up.

Also, you do NOT need to add d-none d-md-block to the parent and all the child classes. If you don't want to show a particular div in less than md, using it on the parent is enough.

Answer 3

For demonstration purposes I went ahead and used a dummy image that I could get to work. Your structure should be as follows.

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

Using the different Large, Medium, and Small bootstrap classes allows for your row to adjust on different screen sizes, while maintaining that row structure. This link here is also very helpful for learning the system.