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

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

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

＆＃13;

<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>

＆＃13;

Answer 2

只要有人在看这个，一个简单的方法就是使用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张卡，它将把所有卡放在同一行上，而不是将它们分成多行。每当我想将卡片放在多行上时，我都只会使用另一个卡片组。希望这可以帮助某人，欢呼。

卡片Bootstrap 4在一行

2 个答案: