html - Bootstrap 4 父容器中的大边距

Question

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

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

我想在调整大小时实现这种效果:

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

(第 3 个下的第一个 div)

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

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

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

当我使用父容器 container mt-3

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

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

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 个单位(左侧)的原因。