如何在一行中使用卡片来实现这种引导布局？答案

【问题标题】：How can i achieve this bootstrap layout using cards in one row?如何在一行中使用卡片来实现这种引导布局？
【发布时间】：2020-08-12 08:22:18
【问题描述】：

我正在尝试连续创建这样的引导卡布局：

到目前为止我尝试过的是：

<div class="row">
    <div class="col-lg-3">
    </div>
    <div class="col-lg-3">
    </div>        
    <div class="col-lg-9">
    </div>
</div>

结果如下：

有人有什么想法吗？提前致谢！:)

顺便说一句*我正在使用 Bootstrap 4。

【问题讨论】：

你的问题解决了吗？

标签： css twitter-bootstrap bootstrap-4 row bootstrap-cards

【解决方案1】：

你可以这样试试……

<div class="row">
    
        <div class="col-lg-3">
          
          <div class="row">
            <div class="col-12">
            </div>
            <div class="col-12">
           </div>
          </div>
    
        </div>
            
        <div class="col-lg-9">
        </div>
    
    </div>

【讨论】：

【解决方案2】：

我会在 Bootstrap 4 中做这样的事情：

<div class="row">
  <div class="col-lg-3">
    <div class="row">
      <p>Col-lg-3</p>
    </div>
    <div class="row">
      <p>Col-lg-3</p>
    </div>
  </div>        
  <div class="col-lg-9">
    <p>Col-lg-9</p>
  </div>
</div>

【讨论】：

【解决方案3】：

请试试这个

---col-lg-3

---------col-12

---col-lg-9

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row border border-black">
    <div class="col-3 h-auto">
      <div class="row h-100">
        <div class="col-12 border border-dark text-center my-auto"><h6>col-lg-3</h6></div>
        <div class="col-12 border border-dark text-center my-auto"><h6>col-lg-3</h6></div>
      </div>
    </div>
    <div class="col-9 h-auto border border-dark"><h6 class="h-100 d-flex align-items-center">col-lg-9</h6></div>       
</div>

【讨论】：