父容器中的 Bootstrap 4 大边距

Question

好的，这是我的第三个问题，希望是最后一个。我的页面布局出现了一些问题，之前看起来像这样：

[navbar]                            
[1][2][3]

我想在调整大小的时候达到这个效果：

[navbar]             
[2][3]         
   [1]

（第三个下的第一个 div）

但是，当我使用（在包含所有 3 个 div 的主容器中）类 container mt-3 时，我得到了这个布局：

[navbar]             
[1][2]                                                                          
   [3]

现在，当我更改第三个 div 的左侧边距时，它不会向上移动到顶行，而是向左移动 - 发生的事情就像在另一个行类中一样。

当我使用父容器container mt-3

[navbar]             
[1][2]   [3]

而且它们真的很小，无论我做什么我都无法改变宽度。我什至尝试使用 px 和 % 更改引导程序的“容器”类。

container-fluid 完成了一些工作，因为所有 div 都更大（并且在页面的 100% 宽度上），但我希望它像 90% 一样，但是 [3] div 仍然在距离 [2] 右侧英里。当我调整窗口大小时，[2] div 进入 [3] 下 [1] 和 [3] 之间的空白区域。所以看起来类似这样：

[navbar]                                       
[2]   [3]          
   [1]         

CSS 代码：

.main{
    background-color: red;
    box-shadow: 3px 3px 20px #000000;
    border-radius: 20px;
}

.left{
    background-color: green;
    max-width: 200px;
    border-radius: 20px;
}

.right{
    background-color: blue;
    max-width: 200px;
    border-radius: 20px;    
}   

.parent-container {
    display: flex;
}

.right-content{
    width: 100%;
    text-align: center;
    float: center;
    margin-top: 10px;
}

HTML

<div class="parent-container container mt-3">
    <div class="row">
        <div class="left col-4 col-lg-3 order-last order-lg-first offset-8 offset-lg-0">
            <div class="col-12 text-center" style="margin-bottom: 15px">
                <h3>TITLE LEFT</h3>
            </div>
        </div>
        <div class=" col-8 col-lg-6">
            <div class="container card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 text-center">
                            <h2>TITLE CENTER</h2>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 text-center">
                                <h3>heading 3</h3>
                                <h6>heading 6</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                    <div class="col-12 mx-auto">
                        <a href="#" class="article-link">
                            <h3>Heading 3</h3>
                            <p>Text</p>
                        </a>
                    </div>
            </div>
            <hr>
    </div>
</div>
        <div class="right col-4 col-lg-3">
            <div class="right-content">
                <h2>TITLE RIGHT</h2>
            </div>
        </div>
</div>

Answer 1

您的列嵌套不正确。这是正确的做法（所有主列必须位于主行内）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
.left{
    background-color: green;
    max-width: 200px;
    border-radius: 20px;
}

.right{
    background-color: blue;
    max-width: 200px;
    border-radius: 20px;    
} 
</style>

<div class="parent-container container mt-3">
    <div class="row">
        <div class="left col-4 col-lg-3 order-last order-lg-first offset-8 offset-lg-0">
            <h3>TITLE LEFT</h3>
        </div>
        <div class=" col-8 col-lg-6">
            <div class="container2 card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 text-center">
                            <h2>TITLE CENTER</h2>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 text-center">
                            <h3>heading 3</h3>
                            <h6>heading 6</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 mx-auto">
                    <a href="#" class="article-link">
                        <h3>Heading 3</h3>
                        <p>Text</p>
                    </a>
                </div>
            </div>
            <hr>
        </div>

        <div class="right col-4 col-lg-3">
            <div class="right-content">
                <h2>TITLE RIGHT</h2>
            </div>
        </div>

    </div>
</div>

注意：目前，这些列不会在最小的屏幕上堆叠。那是因为他们没有被指定这样做。为了使它们堆叠，最小屏幕 (col-*) 的响应列类都需要更改为 col-12。

您还需要调整偏移类别，因为现在offset-8 类别适用于所有小于lg 的屏幕。 offset-8 类导致所有小于 lg 的屏幕上偏移 8 个单位（左侧）。