水平添加/刪除面板和動態調整類boostrap

Question

嗨，我可能只是錯過了一些非常簡單的東西。但我有幾個面板的行，我想根據面板的數量調整col-md-class。我希望這發生在加載和一些點擊事件。我使用coffescript和jquery。

Answer 1

從技術上講，您可以根據您的建議更改腳本中的Bootstrap類。假設你的HTML如下所示：

<div class="my-row row"> 
    <div class="col-md-3 my-col"> ... </div> 
    <div class="col-md-3 my-col"> ... </div> 
    <div class="col-md-3 my-col"> ... </div> 
</div> 
<div class="my-row row"> 
    <div class="col-md-3 my-col"> ... </div> 
    <div class="col-md-3 my-col"> ... </div> 
    <div class="col-md-3 my-col"> ... </div> 
    <div class="col-md-3 my-col"> ... </div> 
</div> 
... 

在這種情況下，這樣的代碼將做的工作（見小提琴here）：

$('...').on 'click', -> 
    $('.my-row').each (i, row) -> 
    $panels = $(row).find('.my-col') 
    numPanels = $panels.length 
    desiredPanelWidth = Math.floor 12/numPanels # or whatever function you want 
    $panels.each (j, col) -> 
     col.className = col.className.replace /\bcol-md-\d+\b/, "col-md-#{desiredPanelWidth}" 

但是，如果你想要的是傳播面板均勻分佈在每一行中，最好使用推薦的here等CSS工具。