使用 bootstrap 5 时，如何摆脱此列下方的额外空间？

问题描述

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

我不确定哪个实体可能导致此问题。

--编辑--

为了更清晰，这里是 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>

解决方法

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

要去除空白，请将 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)。只需使用 col-10，这将适用于以下所有断点。并且 BS-5 不使用 xs - 那是用于 Bootstrap 3。