Question

好的，这是我的第3个问题，希望是最后一个问题。我的页面布局出现了一些问题，如下所示：

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

我希望在调整大小时实现此效果：

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

（第3节下的第1个div）

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

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

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

当我使用父容器container mt-3

时

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

它们非常小，无论我做什么都无法改变宽度。我甚至尝试用px和％更改bootstrap的“容器”类。

容器流体做了一点工作，因为所有的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个单位（左侧）偏移的原因。

父容器中的Bootstrap 4大边距

1 个答案: