html - Bootstrap 4 图像位置

Question

我对Bootstrap 4有疑问。左框不与右框对齐。有一个HTML和CSS。我怎么解决这个问题？

<section>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">Section Title</h1>
        </div>
        <div class="col-md-6">
            <div class="left-box">
                <img src="images/category-1.jpg" alt="" class="img-fluid">
            </div>
            <div class="left-box">
                <img src="images/category-2.jpg" alt="" class="img-fluid">
            </div>
        </div>
        <div class="col-md-6">
            <div class="right-box">
                <img src="images/category-3.jpg" alt="" class="img-fluid">
            </div>
        </div>
    </div>
</div>

CSS：

.left-box{ position:relative; padding-top:30px;}
.right-box{position:relative; padding-top:30px;}

1

谢谢你。

标签： htmlcssbootstrap-4

Answer 1

Bootstrap 中有两种Container，在您的情况下container-fluid更适应。更改container为container-fluid