1

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

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

- 编辑 -

只是为了提供更清晰的信息，这里是 container_tag 和 container_box 在移动屏幕（365 像素）中的外观的屏幕截图。 应该看起来像这样

看起来像这样

.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>

4

1 回答 1

1

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

要摆脱空白，请添加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。

于 2021-05-04T01:34:08.577 回答