如何根據其他列動態更改引導線寬度？

比方說，我們已經創建了一個行插入引導，然後添加兩列，一爲博客內容，在左側（COL-SM-7），另一個用於側邊欄（COL-SM-5），在右側。如何根據其他列動態更改引導線寬度？

當col-sm-5的高度小於col-sm-7的高度時（或者換句話說，有一種方法可以使col-sm-7中的內容擴展爲col-sm-12 ：當側邊欄上沒有內容時：假設用戶只添加一個窗口小部件，問題是，側邊欄將佔據所有右側，這不太好看。）

下面是一個圖像，意思是：

2017-04-10 Dexter

如上所述，沒有辦法使用標準Bootstrap網格來完成此操作。但是，有幾個CSS樣式這是可能的，通過堅持這些「規則」 ..

把第一欄和浮動的權利..

<div class="col-sm-5 pull-right"> 
      .. 
</div>

充分利用col-sm-7寬度：汽車，並取消-float它..

.float-none { 
    float: none; 
    width: auto; 
}

最後，任何一個孩子DIV的的col-sm-7內必須overflow: auto ......

演示：http://www.codeply.com/go/njEg31ZG33

AFAIK，flexbox不能很好地工作。

來源

2017-04-10 16:08:41 ZimSystem

簡單&&乾淨的代碼，我接受這是最好的答案。謝謝你，兄弟。 – Dexter

不客氣！ – ZimSystem

更清潔。尼斯=） – Lewis

我看不到一個簡單的方法在自舉（也許在引導4 Flexbox的...）來做到這一點 - 這兩組的內容是非常分銷商nct容器。你可以用一個小小的javascript和一些CSS hackery來實現它，但這不是明智之舉。本例中的代碼未經測試。

無論如何，這樣做將是把你的側邊欄在同一列您的博客內容（eugh），使的一個潛在方法各content COL-7和您的sidebar COL-5。

此時，您可以使用jQuery來計算哪些行應該展開爲col-12，通過比較側欄的高度（比如400）和列的高度來填充側欄下的空間（比如說，各100個）。這樣，你就會知道4 content的項目總計爲400（側邊欄的高度）。這意味着從第四個元素開始，您可以將類更改爲col-12。

var contentItems = $(".content"); // your 'content' items 
var sidebar = $(".sidebar"); 
var contentItemHeight = $(".content").first().height; 
var sidebarHeight = $(".sidebar").height; 

var smallColumns = sidebarHeight/contentItemHeight; // 4 
var $i = 1; 

$.each($contents, function(){ 
    if($i <= smallColumns){ 
    // Next to sidebar 
    $(this).addClass(".col-xs-7"); 
    }else{ 
    // Below sidebar 
    $(this).addClass(".col-xs-12"); 
    } 
}) 

// Edited to remove accidental switch to PHP

來源

2017-04-10 15:37:10 Lewis

很不錯的主意，太謝謝你了。 – Dexter

如何根據其他列動態更改引導線寬度？

回答

相關問題