父容器中的引导4大裕度

Question

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

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

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

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

(第3条下的第1条)

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

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

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

当我使用父容器container mt-3时

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

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

容器流体的作用有点大，因为所有的div都比较大(页面的宽度为100% )，但是我想要它像90%一样，但是，3div仍然在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个单元(左边)偏移的原因。