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; ?>">

等等...