如何管理引导 4 网格？答案

【问题标题】：How to manage bootstrap 4 grids?如何管理引导 4 网格？
【发布时间】：2021-04-21 02:41:29
【问题描述】：

实际上我有两个像col-md-6 & col-md-6 & 我有六个images 在左侧和右侧我只需要一个images 就像下面给出的代码。

这工作正常，但当右侧图像不可用时，我需要将左六列扩展为全宽。我该怎么办？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
    <div class="col-6">
    <div class="row">
      <div class="col-4" style="background-color:yellow;">img</div>
      <div class="col-4" style="background-color:orange;">img</div>
      <div class="col-4" style="background-color:blue;">img</div>
      <div class="col-4" style="background-color:red;">img</div>
      <div class="col-4" style="background-color:lime;">img</div>
      <div class="col-4" style="background-color:indianred;">img</div>
    </div>
      </div>
          <div class="col-6 p-0">
      <div class="col-12" style="background-color:green; height:48px;">img</div>
</div>
    </div>

</div>

如果正确的col-md-6 不可用，我想要如下代码：-

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
    <div class="col-12">
    <div class="row">
      <div class="col-2" style="background-color:yellow;">img</div>
      <div class="col-2" style="background-color:orange;">img</div>
      <div class="col-2" style="background-color:blue;">img</div>
      <div class="col-2" style="background-color:red;">img</div>
      <div class="col-2" style="background-color:lime;">img</div>
      <div class="col-2" style="background-color:indianred;">img</div>
    </div>
      </div>
    </div>

</div>

我们将不胜感激！

【问题讨论】：

您是否尝试仅使用 CSS 来完成此任务？我的意思是，显而易见的解决方案是在呈现 HTML 的任何位置更改逻辑，并在该图像不可用时在没有第二列的情况下呈现它。
其实有一个条件，就是右边的banner不是强制的，有时不应该。这就是问题所在，不是无法理解如何管理它。
那么当没有正确的横幅时，HTML的哪一部分会丢失？仅此<div class="col-12" style="background-color:green; height:48px;">img</div> 或img 或整列<div class="col-6 p-0">...</div>？
整列 <div class="col-6 p-0"> 将是有条件的...
哦，在那种情况下，@kantbtrue 答案正是您所需要的。

标签： javascript html css bootstrap-4

【解决方案1】：

将col-6 替换为col

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
    <div class="col">
    <div class="row">
      <div class="col-4" style="background-color:yellow;">img</div>
      <div class="col-4" style="background-color:orange;">img</div>
      <div class="col-4" style="background-color:blue;">img</div>
      <div class="col-4" style="background-color:red;">img</div>
      <div class="col-4" style="background-color:lime;">img</div>
      <div class="col-4" style="background-color:indianred;">img</div>
    </div>
      </div>
          <div class="col p-0">
      <div class="col-12" style="background-color:green; height:48px;">img</div>
</div>
    </div>

</div>

【讨论】：

我想他知道这一点。我可能是错的，但我认为他对在确定更大的图像不可用后如何动态执行此操作感兴趣。
它会起作用，即使是动态删除更大的图像区域。