了解。您不希望勾選項全部擠在同一行 (inline)，而是希望它們像表格一樣，整齊地排列成網格 (Grid)。
在舊版 Bootstrap (3/4) 中，最好的做法是使用它內建的網格系統 (Grid System) (.row 和 .col-*) 來取代 .checkbox-inline。
我們將 12 個項目排列成 3 行 4 列的網格。
更新 View (Index.vbhtml)
您只需要修改 div.panel-body 區域的 HTML。
(表格 <table> 和 JavaScript @Section Scripts 都不需要變更。)
請將 Views/Home/Index.vbhtml 中 <div class="panel-body">...</div> 的內容替換為以下程式碼：
<div class="panel-body">
<div class="checkbox">
<label>
<input type="checkbox" id="checkAll" checked /> <strong>全部選取</strong>
</label>
</div>
<hr style="margin-top: 10px; margin-bottom: 20px;">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" class="column-toggle" data-column="col-pdid" checked /> PDID
</label>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" class="column-toggle" data-column="col-prod-info" checked /> Product Information
</label>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" class="column-toggle" data-column="col-weight" checked /> Weight
</label>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" class="column-toggle" data-column="col-tam" checked /> TAM
</label>
</div>
</div>
</div> <div class="row">
<div class="col-md-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" class="column-toggle" data-column="col-sam" checked /> SAM
</label>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" class="column-toggle" data-column="col-1y-ship" checked /> 1Y shipment
</label>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" class="column-toggle" data-column="col-qtd" checked /> QTD
</label>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" class="column-toggle" data-column="col-mtd" checked /> MTD
</label>
</div>
</div>
</div> <div class="row">
<div class="col-md-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" class="column-toggle" data-column="col-backlog" checked /> Backlog
</label>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" class="column-toggle" data-column="col-sales-fb" checked /> Sales Feedback
</label>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" class="column-toggle" data-column="col-remark" checked /> Remark
</label>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" class="column-toggle" data-column="col-qty" checked /> QTY
</label>
</div>
</div>
</div> </div>
說明：
* .row: 建立一個水平行。
* .col-md-3: 在中等螢幕 (桌機) 上，一個欄位佔 1/4 寬度 (因為 3 * 4 = 12)。
* .col-sm-6: (可選，但建議) 在小型螢幕 (平板) 上，一個欄位佔 1/2 寬度 (2 欄)，避免擠壓。
* .checkbox: 使用標準的 checkbox 樣式 (垂直堆疊)，取代 .checkbox-inline (水平排列)。
這樣修改後，您的勾選項就會以 4 欄 x 3 列 的網格整齊排列，而「全部選取」的功能和欄位隱藏的 jQuery 邏輯完全不受影響。
