Question

嗨，我可能只是错过了一些非常简单的事情。但我有几行带面板，我想根据面板数量调整col-md-类。我希望这可以在加载和一些点击事件上发生。我使用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工具。

水平添加/删除面板并动态调整类boostrap

1 个答案: