html - 为什么我的页面中的 col-md-6 显示全宽？

Question

使用 Bootstrap 5.0.2，我有一个两列网格，在一行中使用 col-md-6 两次。然而，它们占据了整个宽度而不是屏幕的一半并垂直堆叠。这是怎么回事？

请参阅下面的 html 和样式表

<div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="mainbox lg-mainbox-left"></div>
            </div>           
            <div class="col-md-6">
                <div class="mainbox lg-mainbox-right"></div>
            </div>
        </div>
    </div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mainbox {
    width: 100%;
    height: 100vh;
    background-color: black;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    
}
.lg-mainbox-left {    
    background-image: url("images/herobanner-left.png");
}
.lg-mainbox-right {    
    background-image: url("images/herobanner-right.png");
}

标签： htmlcsstwitter-bootstrapcss-grid