Question

我正在使用bootstrap 3和PHP显示一个页面，其中1,2或3个面板并排显示，具体取决于用户查看这些面板的权限（他们始终有权查看至少一个）。

如果用户可以看到所有3个，我希望它们并排显示，每个使用4个网格列。如果他们可以看到两个，我希望他们填充可用的宽度，即每个6列。最后一个12列面板，如果用户只能看到一个面板。

我认为将面板放在容器流体中并且在同一个div中使用class＆＃39; row＆＃39;，并且没有指定它们的宽度是多少，可能会做到这一点，但这会使它们全部出现在在另一个的顶部占据页面的整个宽度。

如何使用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; ?>">

等...

Bootstrap面板填充可用宽度

3 个答案: