Bootstrap v4.1 .card multirow两列

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 you can see their examples here中查找嵌套列，但是其代码不太麻烦。在您的一列中，您可以添加另一个 * Explain that core policies were created to give applications the ability to control the mapping of (user) threads to cores, and why they might want to do this. ，然后再添加row

col-x

我updated the jsfiddle您的代码，以便您可以实际查看它。希望有帮助。