Question

我正在尝试使用三个相等的列进行布局。在第三列中，我想要两行两个宽度相等的盒子。出于某种原因，列不覆盖1/3宽度，而是覆盖整个页面宽度。我在下面包含了我的HTML和相关的CSS。

<div id="about-me" class="container">
    <div class="row">
        <div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"></div>
        <div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"></div>
        <div class="sm-col-4 md-col-4 lg-col-4 xl-col-4">
            <div class="row">
                <div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
                <div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
            </div>
            <div class="row">
                <div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
                <div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
            </div>
        </div>
    </div>
</div>

这是CSS：

#about-me {
    height: 100vh;
}
.simple-image-box {
    height: 50px;
    padding: 10px;
    width: 40%;
    color: cadetblue;
}

Answer 1

你写了type-col-number而不是col-type-number。

HTML：

<div id="about-me" class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
        <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
        <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
    </div>
</div>

Bootstrap列div覆盖容器的整个宽度，而不仅仅是列宽

1 个答案: