col-breaking我們的包裝

我想了解如何響應式佈局的工作原理，所以我採取了從引導響應col佈局。col-breaking我們的包裝

我想要做的是創建一個紅框，填充1列的空間，並讓它坐在container_fluid> container> row內。當我將「col-lg-12」添加到類中時，它突破了container_fluid> container>行。

HTML

<div class="container_fluid"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-1 "> 
     <div class="red_box"></div> 
     </div> 
    </div> 
    </div>  
</div>

CSS

.container_fluid{ 
margin-left: 0px; 
margin-right: 0px; 
background-color: #000000; 
} 
.container{ 
margin: 0px auto; 
padding: 10px 0px 10px 0px; 
background-color: #367AD7; 
} 
.row{ 
margin-left: 0px; 
margin-right: 0px; 
}

包含所有COL-LG COL-MD等是所有在CSS以及該部分。

來源

2017-05-27 James Legg

您對div.container-fluid –

沒有結束標籤哎呀，對不起，當我複製粘貼我錯過了最後一個結束標記。我其實已經在那裏。謝謝 –

只要使用此：

<div class="container"> 
<div class="row"> 
    <div class="col-lg-1 "> 
     <div class="red_box"></div> 
    </div> 
</div>

取出容器流體格。我希望它能完成這項工作。

來源

2017-05-27 12:57:31

使用引導網格系統的期望的方式是這樣的液體容器：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-lg-1"> 
     <div class="red_box"></div> 
    </div> 
    </div> 
</div>

而且這樣一個固定的中心容器：

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-12"> 
     <div class="red_box"></div> 
    </div> 
    </div> 
</div>

在大多數情況下，你不不需要重置容器和行邊距，它適用於它！

看看下列example。

來源

2017-05-27 13:17:58

col-breaking我們的包裝

回答

相關問題