Bootstrap 3 Grid系统，如果缺少第二列，则使第一列全宽答案

【问题标题】：Bootstrap 3 Grid system, make first column fullwidth if second is missingBootstrap 3 Grid系统，如果缺少第二列，则使第一列全宽
【发布时间】：2018-03-26 16:25:16
【问题描述】：

假设在下面的代码中有$someThingIsTrue 是假的。容器行是否有任何类或属性可以如果第二列丢失，则将第一列宽度设置为 100%？

请注意，我只寻找 Bootstrap 解决方案（因为我也明白，如果需要，我可以编写相同的 if 语句并为第一列设置 col-lg-12）

    <div class="row">
        <div class="col-lg-6">Some content here</div>

        <?php if($someThingIsTrue): ?>
           <div class="col-lg-6">Other content here</div>
        <?php endif; ?>
    </div>

【问题讨论】：

在 Bootstrap 3 中你不能，但在 4 中你可以

标签： php html css twitter-bootstrap

【解决方案1】：

如果你想在 PHP 中这样做，试试这个：

<div class="row">
    <div class="col-lg-<?= ($someThingIsTrue ? '6' : '12') ?>">Some content here</div>
    <?php if ($someThingIsTrue): ?>
    <div class="col-lg-6">Other content here</div>
    <?php endif; ?>
</div>

或者如果您使用bootstrap 4 you can use flexbox，则需要在每个项目上加上width:100%。

<div class="d-flex">
  <div class="p-2">Other content here</div>
  <?php if ($someThingIsTrue): ?>
  <div class="p-2">Some Other content here</div>
  <?php endif; ?>
</div>

这是一个例子（查看 sn-p）：

.box {
  width:100%;
}

.box-blue {
  background:blue;
}

.box-red {
  background:red;
}

.box-green {
  background:green;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="d-flex">
  <div class="p-2 box box-red">Other content here</div>
  <div class="p-2 box box-blue">Some Other content here</div>
</div>

<div class="d-flex">
  <div class="p-2 box box-green">Some Other content here</div>
</div>

【讨论】：

因为它不是我在问题中提出的引导解决方案，我可以猜测这种情况没有引导解决方案吗？
我支持它，因为它真的很有用，但我正在寻找 bootrsrap 3 的解决方案，我现在将编辑我的问题

【解决方案2】：

你可以在php变量$class中设置class如下：

<div class="row">
        <?php
            if($someThingIsTrue)
               $class= 'col-lg-6';
            else
               $class = 'col-lg-12';
           endif; 
        ?>
        <div class="<?php echo $class;">Some content here</div>

        <?php if($someThingIsTrue): ?>
           <div class="col-gl-6">Other content here</div>
        <?php endif; ?>
    </div>

【讨论】：

如果您知道解决方案，请再次阅读我的问题并编辑您的答案
我认为没有直接的引导解决方案。您可以使用 javascript/jQuery 处理的另一种方法。您可以使用 jQuery 检查whether second column exists 并相应地使用 jQuery 更改第一列的类。其他选项可能是使用 css。