卡片 Bootstrap 4 合一

Question

我正在尝试将我的卡片（面板）设置为彼此相邻，并且我正在使用 mdbootstrap.com 上的模板。

我的代码：

<div class="row">
      <div class="col-md-12">


  <div class="card mdb-color lighten-2 text-center z-depth-2">
              <div class="card-body">
                  <p class="white-text mb-0"> <?php echo convertCurrency("1.00", "POUND", "DOLLAR");
                   ?>.</p>
              </div>
          </div>
<Br>
<div class="card mdb-color lighten-2 text-center z-depth-2">
            <div class="card-body">
                <p class="white-text mb-0">btc<i class="fa fa-bitcoin" aria-hidden="true">
</i> = <?php echo $info['rate'];
                 ?></p>
            </div>
        </div>

      </div>
    </div>

我试图给它一个 d-inline 类，但它不起作用......

我正在使用的卡片https://mdbootstrap.com/components/panels/

Answer 1

以防万一有人看到这个，一个简单的方法是使用 card-deck 类。 因此，例如：

<div class=card-deck>
<!-- First Card -->
    <div class="card">
        <div class="card-title">Title here</div>
        <div class="card-body">Body here</div>
    </div>
<!-- Second Card -->
    <div class="card">
        <div class="card-title">Title here</div>
        <div class="card-body">Body here</div>
    </div>
</div>

请记住，所有卡片都放在卡片组 div 中。 这样做的一个缺点是，如果您有 6 张卡片，它会将所有卡片放在同一行上，而不是将它们分成多行。 每当我想要卡片在多条线上时，我就使用另一个卡片组。 希望这对某人有所帮助，干杯。

Answer 2

做你想做的一种方法是将两张卡放在两个单独的列中，每列，即每个盒子卡应该在一个类col-md-6的 div 内。

以下代码显示了两张卡片，并排显示在桌面浏览器窗口大小中。

 <div class="row"> <div class="col-md-6"> <div class="card mdb-color lighten-2 text-center z-depth-2"> <div class="card-body"> <p class="white-text mb-0">واحد جنيه سوداني = <?php echo convertCurrency("1.00", "SDG", "USD")." دولار امريكي";?>.</p> </div> </div> </div> <div class="col-md-6"> <div class="card mdb-color lighten-2 text-center z-depth-2"> <div class="card-body"> <p class="white-text mb-0">بتكوين <i class="fa fa-bitcoin" aria-hidden="true"></i> = <?php echo $info['rate']." جنيه سوداني";?></p> </div> </div> </div> </div>