Bootstrap面板填充可用寬度

Question

我使用bootstrap 3和PHP來顯示一個頁面，其中1,2或3個面板並排顯示，具體取決於用戶查看這些面板的權限（他們總是有權查看至少一個）。

如果用戶可以看到所有3個，我希望它們並排顯示，每個使用4個網格列。 如果他們可以看到兩個，我希望他們填充可用的寬度，即每個6列。 最后一個12列面板如果用戶只能看到一個面板。

我認為將面板放在容器流體中並且在同一個div中使用類'row'，並且沒有指定它們的寬度是多少，可能會做到這一點，但這會使它們全部出現在另一個之上並占用頁面的全寬。

如何使用bootstrap實現上述功能，而不是必須使用PHP代碼來更改列數，具體取決於顯示的面板數量（我認為這將更加繁瑣）。

Answer 1

我認為這是不可能的。 面板的設計是為了填充容器（如塊元素）。 也許您可以將一個顯示內聯塊css屬性應用於面板，但是您需要計算css寬度以應用它們來填充整行...

Answer 2

試試這個功能。 它使塊靈活性http://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 3

雖然我想要一個更簡單的CSS方法，需要更少的邏輯，但我發現自己同意@Axel並在PHP中完成它。

由於有3個可能的權限和3個值為0或1的變量來確定這些權限，我做了類似的事情;

$number_of_panels = $permission1 + $permission2 + $permission3;

switch ($number_of_panels) {
    case 1:
        $panel_width = 12;
        break;
    case 2:
        $panel_width = 6;
        break;
    case 3:
        $panel_width = 4;
        break;
}

進一步向下;

<div class="row">
    <?php if ($permission1 == 1) { ?>
    <div class="col-md-<?php echo $panel_width; ?>">

等等...