爲什麼我在引導多加一個山坳，它的股價下跌

Question

當我添加山坳1號，列數2下降。如果我刪除列號1，列號2它像列號3一樣簡單。我不知道發生了什麼？

Answer 1

這可能是因爲你可能會被添加在COL2同一格的COL1。 你的部門應該是

<div><!-- left section --> 
col-3 
</div> 
<div><!-- center section --> 
col-1 
</div> 
<div><!-- right section --> 
col-2 
</div> 

Answer 2

不希望您的列在某些網格層中簡單堆疊嗎？根據需要爲每個層使用不同類的組合。請參閱下面的示例以更好地瞭解它是如何工作的。

學習它https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Stack the columns on mobile by making one full-width and the other half-width --> 
 
<div class="row"> 
 
    <div class="col-12 col-md-8">.col-12 .col-md-8</div> 
 
    <div class="col-6 col-md-4">.col-6 .col-md-4</div> 
 
</div> 
 

 
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> 
 
<div class="row"> 
 
    <div class="col-6 col-md-4">.col-6 .col-md-4</div> 
 
    <div class="col-6 col-md-4">.col-6 .col-md-4</div> 
 
    <div class="col-6 col-md-4">.col-6 .col-md-4</div> 
 
</div> 
 

 
<!-- Columns are always 50% wide, on mobile and desktop --> 
 
<div class="row"> 
 
    <div class="col-6">.col-6</div> 
 
    <div class="col-6">.col-6</div> 
 
</div>

Answer 3

我改變你的HTML

要

<div class="row"> 
    <div class="col-xs-2" style="height:800px;border: 1px solid red;"><span class="left"></span></div> 
    <div class="col-xs-8 row"> 
    <div class="col-xs-12" style="height:595px;border: 1px solid black;"> <span class="center"></span></div> 
    <div class="col-xs-12" style="height:205px;border: 1px solid blue;"> <span class="center"></span></div> 
    </div> 
    <div class="col-xs-2" style="height:800px;border: 1px solid red;"><span class="right"></span></div> 

</div> 

這裏是一個jsfiddle ..