使用 bootstrap 5 时，如何去掉此列下方的额外 space？

Question

我按照您的描述进行了更改，但是当我检查它在 phone 上的外观时，蓝色框和粉红色框是分开的，我想放在一起。我附上了它的外观截图，我希望它看起来与桌面版相似。

我不确定是哪个实体导致了这个问题。

--编辑--

为了更清楚起见，这里提供了 container_tag 和 container_box 在移动屏幕 (365px) 中的外观截图。 Should look like this

Is looking like this

.side_feedback{
    background-color: pink;
    padding: 10px;
    height: 300px;
    width: 180px;
    border-radius: 10%;
    margin-left: 17px;
}
.container_tag{
    background-color: royalblue;
    min-height: 200px;
    max-width: 2rem;
    border: 6px solid royalblue;
    float: left;
}
.tag{
    transform: rotate(-90deg);
    position: relative;
    top: 8rem;
}
.container_box{
    background-color: pink;
    min-height: 200px;
    border-left: 6px solid white;
    width: 95%;
    position: relative;
    float: left;
}

<div class="container-fluid">
        <div class="row mb-4 g-5">
            <div class="order-2 order-sm-1 col-lg-2 col-md-2 col-xs-10">
                <div class="col-md">
                    <div class="side_feedback">
                        <p>Give us feedback!</p>

                    </div>
                </div>
            </div>
            <div class="order-1 order-sm-2 col-10">
                <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-1 row-cols-auto g-4">
                    <div class="col-12">
                        <div class="container_tag">
                            <h3 class="tag">TEXT</h3>
                        </div>
                        <div class="container_box">
                        </div>
                    </div> 
                    <div class="col-12"> 
                        <div class="container_tag">
                            <h3 class="tag">TEXT</h3>
                        </div>
                        <div class="container_box">
                            
                        </div>    
                    </div> 
                    <div class="col-12"> 
                        <div class="container_tag">
                            <h3 class="tag">TEXT</h3>
                        </div>
                        <div class="container_box">
                            
                        </div>    
                    </div> 
                </div>
            </div>
        </div>

Answer 1

如果您引用两个粉红色块下方的大垂直白色 space，那是因为您在粉红色 container_box. position: relative 上使用 position: relative正常定位元素（在您的 container_tag div 下方），然后将元素移动到新位置 — 原始 space 仍然存在。

要去除白色 space，请将 float: left 添加到两个容器的样式中。

.container_tag {
    background-color: royalblue;
    min-height: 180px;
    width: 9%;
    max-width: 3.2rem;
    float: left;
    position: relative;
}

.tag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-90deg)
}

.container_box {
    background-color: pink;
    min-height: 180px;
    border-left: 6px solid white;
    width: 91%;
    position: relative;
    float: left;
}

@media (min-width:768px) {
    .container_box {
        width: calc(100% - 3.2rem);
    }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-12 col-sm-10 px-0">
            <div class="row gx-0">
                <div class="col-12 mb-3">
                    <div class="container_tag">
                        <h3 class="tag">Text</h3>
                    </div>
                    <div class="container_box">
                    </div>
                </div>
                <div class="col-12 mb-3">
                    <div class="container_tag">
                        <h3 class="tag">Text</h3>
                    </div>
                    <div class="container_box">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

另一个注意事项 - 您不需要为不同的断点 (col-lg-10 col-md-10 col-xs-10) 提供同一列 class。只需使用 col-10，它将应用于以下所有断点。 BS-5 不使用 xs - 那是 Bootstrap 3.

使用 bootstrap 5 时，如何去掉此列下方的额外 space？

How do I get rid of this extra space below this column when using bootstrap 5?

css

spacing

gutter

bootstrap-5