Bootstrap v4.1 .card многорядная две колонки

Question

Используя Bootstrap v4.1, как я могу создать двухколонный многорядный дисплей для карт?Мне нужно сделать это три раза, так как каждый набор из двух будет сгруппирован для выполнения разных задач.Пожалуйста, найдите мой код ниже.Обратитесь за помощью, пожалуйста.

body {
  background: url("../img/3E184478-7FEF-4B58-9019-54BAAB274008-25530-00000D973368B5BD.PNG") no-repeat fixed center;
  background-size: cover;
  margin: 8px;
}

#wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

#wrapper svg {
  width: 100%;
  height: 100%;
}


/* bevel size, left offset and color settings next 3 lines */

.bvc {
  left: -15px
}

.content:hover {
  background-color: #efefef;
  color: #231F20;
}

.bevel,
.content {
  /* border-width: 5px */
}

.bevel,
.content {
  /* border-color: #efefef;  */
  /* border-style:solid; */
}

.bvc {
  /* background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(229,229,229,0.96) 5%,rgba(204,204,204,0.89) 15%,rgba(178,178,178,0.82) 25%,rgba(173,173,173,0.8) 27%,rgba(153,153,153,0.75) 35%,rgba(127,127,127,0.68) 45%,rgba(115,115,115,0.65) 50%,rgba(102,102,102,0.62) 55%,rgba(76,76,76,0.56) 65%,rgba(50,50,50,0.51) 75%,rgba(48,48,48,0.5) 76%,rgba(25,25,25,0.44) 85%,rgba(0,0,0,0.38) 95%,rgba(0,0,0,0.35) 100%); */
  width: 90%;
  /* width of overall box, variable or fixed */
  margin: 0 auto;
  position: relative;
  margin-bottom: 10px;
}

.bvc .tr,
.bvc .tl,
.bvc .br,
.bvc .bl {
  height: 0px;
  width: 100%;
}

.bvc .tr,
.bvc .tl {
  border-top: 0;
}

.bvc .br,
.bvc .bl {
  border-bottom: 0;
}

.bvc .tr,
.bvc .br {
  border-right-color: transparent;
}

.bvc .tl,
.bvc .bl {
  border-left-color: transparent;
}

.no_bevel {
  height: 0px;
  width: 100%;
  border-bottom: 0;
}

.content {
  /* background: #efefef url(http://placehold.it/2000x200/efefef) no-repeat; */
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+3,cccccc+12,b2b2b2+22,999999+32,7f7f7f+42,666666+52,4c4c4c+62,323232+72,191919+82,000000+92&1+0,0.8+27,0.65+50,0.5+76,0.35+100 */
  background: -moz-linear-gradient(-45deg, rgb(255, 254, 249, 1) 0%, rgba(229, 229, 229, 0.98) 3%, rgba(204, 204, 204, 0.91) 12%, rgba(178, 178, 178, 0.84) 22%, rgba(166, 166, 166, 0.8) 27%, rgba(153, 153, 153, 0.77) 32%, rgba(127, 127, 127, 0.7) 42%, rgba(107, 107, 107, 0.65) 50%, rgba(102, 102, 102, 0.64) 52%, rgba(76, 76, 76, 0.58) 62%, rgba(50, 50, 50, 0.52) 72%, rgba(40, 40, 40, 0.5) 76%, rgba(25, 25, 25, 0.46) 82%, rgba(0, 0, 0, 0.4) 92%, rgba(0, 0, 0, 0.35) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(255, 254, 249, 1) 0%, rgba(229, 229, 229, 0.98) 3%, rgba(204, 204, 204, 0.91) 12%, rgba(178, 178, 178, 0.84) 22%, rgba(166, 166, 166, 0.8) 27%, rgba(153, 153, 153, 0.77) 32%, rgba(127, 127, 127, 0.7) 42%, rgba(107, 107, 107, 0.65) 50%, rgba(102, 102, 102, 0.64) 52%, rgba(76, 76, 76, 0.58) 62%, rgba(50, 50, 50, 0.52) 72%, rgba(40, 40, 40, 0.5) 76%, rgba(25, 25, 25, 0.46) 82%, rgba(0, 0, 0, 0.4) 92%, rgba(0, 0, 0, 0.35) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(255, 254, 249, 1) 0%, rgba(229, 229, 229, 0.98) 3%, rgba(204, 204, 204, 0.91) 12%, rgba(178, 178, 178, 0.84) 22%, rgba(166, 166, 166, 0.8) 27%, rgba(153, 153, 153, 0.77) 32%, rgba(127, 127, 127, 0.7) 42%, rgba(107, 107, 107, 0.65) 50%, rgba(102, 102, 102, 0.64) 52%, rgba(76, 76, 76, 0.58) 62%, rgba(50, 50, 50, 0.52) 72%, rgba(40, 40, 40, 0.5) 76%, rgba(25, 25, 25, 0.46) 82%, rgba(0, 0, 0, 0.4) 92%, rgba(0, 0, 0, 0.35) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#59000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  width: 110%;
  border-top: 0;
  border-bottom: 0;
  padding: 3px 0 3px 25px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%, 0 65%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%, 0 65%);
  font-size: 18px;
  font-weight: bold;
  color: #efefef;
  height: 36px;
}

.card-deck {
  height: 120px;
  margin-right: 0px;
  margin-left: 0px;
}

.card-deck .card {
  margin-left: 5px;
  margin-right: 5px;
}

#floater {
  float: left;
  height: 50%;
  width: 100%;
  margin-bottom: -50%;
}

.card-body {
  padding: 25% 1%;
  font-weight: bold;
}

.card-text {
  text-align: center;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

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

<body>
  <div class="container">
    <div class="row">
      <div class="col-4">
        <div class="bvc">
          <!-- <div class="bevel tr"></div> -->
          <div class="content">Workspaces</div>
          <!-- <div class="bevel bl"></div> -->
        </div>
        <div id="cyb_dir-wksp" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Cyber Directives</p>
          </div>
        </div>
        <div id="ent_wksp" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Enterprise</p>
          </div>
        </div>
        <div id="site_grp_wksp" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Site Group</p>
          </div>
        </div>
        <div id="ech_wksp" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Echelon</p>
          </div>
        </div>
        <div id="sys_wksp" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">System</p>
          </div>
        </div>
        <div id="site_wksp" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Site</p>
          </div>
        </div>
        <div id="vram_wksp" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">VRAM</p>
          </div>
        </div>
        <div id="sub_wksp" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Subordinate</p>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="bvc">
          <!-- <div class="bevel tr"></div> -->
          <div class="content">Reports</div>
          <!-- <div class="bevel bl"></div> -->
        </div>
        <div id="sys_acc_rpt" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">System Accreditation</p>
          </div>
        </div>
        <div id="site_acc_rpt" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Site Accreditation</p>
          </div>
        </div>
        <div id="ast_ivn_rpt" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Asset Inventory</p>
          </div>
        </div>
        <div id="agt_rpt" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">agent.btz</p>
          </div>
        </div>
        <div id="ati_rpt" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Antivirus</p>
          </div>
        </div>
        <div id="sys_bsln_sum_rpt" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">System Baseline Summary</p>
          </div>
        </div>
        <div id="vul_rpt" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Vulnerability</p>
          </div>
        </div>
        <div id="scan_sta_rpt" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Scan Status</p>
          </div>
        </div>
        <div id="scan_arc_rpt" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Scan Archives</p>
          </div>
        </div>
        <div id="cyb_sec_rdy_rpt" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Cyber Security Readiness</p>
          </div>
        </div>
        <div id="vul_exp_rpt" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Vulnerability Exposure</p>
          </div>
        </div>
        <div id="" class="card bg-light mb-2" style="max-width: 11rem; visibility: hidden">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">None</p>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="bvc">
          <!-- <div class="bevel tr"></div> -->
          <div class="content">Administration</div>
          <!-- <div class="bevel bl"></div> -->
        </div>
        <div id="sys_adm" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">System</p>
          </div>
        </div>
        <div id="user_adm" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">User</p>
          </div>
        </div>
        <div id="site_adm" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Site</p>
          </div>
        </div>
        <div id="site_grp_adm" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Site Group</p>
          </div>
        </div>
        <div id="audit_adm" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Audit</p>
          </div>
        </div>
        <div id="msg_adm" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Message</p>
          </div>
        </div>
        <div id="ctrl_file_adm" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">Control Files</p>
          </div>
        </div>
        <div id="abac_adm" class="card bg-light mb-2" style="max-width: 11rem;">
          <!-- <div class="card-header">Header</div> -->
          <div class="card-body">
            <!-- <h5 class="card-title">Light card title</h5> -->
            <p class="card-text">ABAC</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
  <!-- <script src="js/jquery-3.3.1.min.js"></script> -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> -->
  <!-- <script src="js/popper.min.js"></script> -->
  <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> -->
  <!-- <script src="js/bootstrap.min.js"></script> -->
</body>

Answer 1

Если вы ищете вложенные столбцы в bootstrap 4, вы можете увидеть их примеры здесь , но код для этого не слишком сложен.В один из столбцов вы можете добавить еще один row, а затем ваш col-x

  <div class="container">
    <div class="row">
      <div class="col-4">
        <!--start nested rows here -->
        <div class="row">
          <div class="col-4 text">
            Nest Column One
          </div>
          <div class="col-4 text">
            Nest Column Two
          </div>
        </div>
        <!--end nested rows here -->
     </div>
    </div>
  </div>

I обновил jsfiddle вашего кода, чтобы вы могли видеть его в действии.Надеюсь, это поможет.