如何讓一個div縮放瀏覽器時不會破壞

傢伙，我有三個divs在這個設置：我不知道，如果你熟悉這個引導CSS，但我應該給它一個嘗試：如何讓一個div縮放瀏覽器時不會破壞

<div class="row-fluid"> 
    <div class="span4"> A graph here </div> 
    <div class="span4"> A graph here </div> 
    <div class="span4"> A graph here </div> 
</div> 

<div class="row-fluid"> 
    <div class="span4"> Another graph here </div> 
    <div class="span4"> Another graph here </div> 
    <div class="span4"> Another graph here </div> 
</div>

span4將按比例使三個div適合整個頁面。所以位置是三個圖形將彼此並排放置在頂部div上，另外三個圖形將放在其下面。

我的問題是，當我調整瀏覽器窗口的大小時，圖形將垂直放置在彼此之下，就像他們現在擁有自己的容器一樣。如何製作這些圖表，保持它們的並排位置？

來源

2014-03-25 user2881063

看來，你使用的是舊版本的引導（2.3）的。你能更新到3.1嗎？ – tjati

是不是「排流式」，這使得divs在重新打開頁面時不受影響？你應該改變它。只嘗試「行」，而不是「行流體」 – Tynamo

沒有，刪除行液也沒有工作。 – user2881063

，你可以做到以下幾點：

<div class="row-fluid"> 
    <div class="third"> A graph here </div> 
    <div class="third"> A graph here </div> 
    <div class="third"> A graph here </div> 
</div> 

<div class="row-fluid"> 
    <div class="third"> Another graph here </div> 
    <div class="third"> Another graph here </div> 
    <div class="third"> Another graph here </div> 
</div>

和css：

.third{ 
float:left; 
width:33.33%; 
}

來源

2014-03-25 07:23:09 Moussawi7

爲什麼在bs3可以使用現有代碼處理它時創建一個新類？ – JayD

你需要把他們的div像這樣 -

<div class="row"> 
    <div class="col-xs-4"> 
    graph1 
    </div> 
    <div class="col-xs-4"> 
    graph2 
    </div> 
    <div class="col-xs-4"> 
    graph3 
    </div> 
</div>

每一行的div加起來應該到12來完全填充該行。 col-X在div class=表示您的div將垂直堆疊而不是水平堆疊。因此，如果您有col-sm-4，您的div將在引導「小」分辨率媒體查詢上垂直堆疊。通過將它們設置爲col-xs-4，每行將保持小分辨率的水平。

還檢查了這些資源 Bootstrap official documentation Understanding BootStrap grid system for beginners

來源

2014-03-25 08:35:04 JayD

如何讓一個div縮放瀏覽器時不會破壞

回答

相關問題