Bootstrap 4 Cards - 如何在一行中设置 2 张卡片

Question

我怎样才能让 2 张卡片看起来彼此相邻，在同一行，而视图是水平的？

我的代码：

h2 { 
display: block;
font-size: 2.50em;
margin-top: 0.25em;
margin-bottom: 0.25em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
*{
box-sizing: border-box; 
}
card-deck{           /*Assuming this class as parent of all your cards*/
column-count: 2;
column-gap: 2.5rem;  /*According to need*/
}

card{
width: 45%;       /*According to need , such that no vertical scroll apear*/
height: 30%;      /*According to need*/
padding: 20px;   /*According to need*/
}


</style>
   <?php include '728x90.php'; ?>
<div class="text-center py-6"><h3 class="mb-1">Offerwalls</h3> <p class="text-base leading-none">Earn a huge amount of Coins by completing many different types of tasks, watching video, playing games and others.</p></div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
           <center>There is 10% Bonus For Cpx Research!
         </div>
      <?php if ($settings['cpx_status'] == 'on') { ?>
<div align="center" class="justify-content-center">
<div class="col-md-6">
<div class="card-deck">
<div class="card" style="width:330px">
<center><h2 style="color:LightBlue;">CPX</h2>
<div class="card-body">
<span class="badge badge-light-primary badge-pill ml-auto mr-1">BONUS</span>
                       <span class="badge badge-light-warning badge-pill ml-auto mr-1">Featured</span>                 
                       <span class="badge badge-light-primary badge-pill ml-auto mr-1"    data-toggle="popover" data-content="Complete Surveys To Earn High Amount Of Coins" data-trigger="hover" data-original-title="Surveys" data-placement="bottom">Surveys</span>
                       <span class="badge badge-light-primary badge-pill ml-auto mr-1"    data-toggle="popover" data-content="Earn High Amount Of Coins" data-trigger="hover" data-original-title="Reward" data-placement="bottom">High Reward</span><br><br>
                        <div class="row border-top text-center mx-0"></div><br>
<center>
<a class="btn btn-primary" href=<?= base_url() ?>>View</a></center></li>
</ul>
</li>
</div>
</div>
</div>
</div>

   <?php } ?>
   <?php if ($settings['wannads_status'] == 'on') { ?>
<div align="center" class="justify-content-center">
<div class="col-md-6">
<div class="card-deck">
<div class="card" style="width:330px">
<center><h2 style="color:Orange;">Wannads</h2>
<div class="card-body">

                       <span class="badge badge-light-primary badge-pill ml-auto mr-1"    data-toggle="popover" data-content="Complete Surveys To Earn High Amount Of Coins" data-trigger="hover" data-original-title="Surveys" data-placement="bottom">Surveys</span>
                       <span class="badge badge-light-primary badge-pill ml-auto mr-1"    data-toggle="popover" data-content="Earn High Amount Of Coins" data-trigger="hover" data-original-title="Reward" data-placement="bottom">Apps</span><br><br>
                        <div class="row border-top text-center mx-0"></div><br>
<center>
<a class="btn btn-primary" href=<?= base_url() ?>>View</a></center></li>
</ul>
</li>
</div>
</div>
</div>
</div>
   <?php } ?>
         <?php if ($settings['wannads_status'] == 'on') { ?>
<div align="center" class="justify-content-center">

<div class="col-md-6">
<div class="card-deck">
<div class="card" style="width:330px">
<center><h2 style="color:Orange;">Wannads</h2>
<div class="card-body">

                       <span class="badge badge-light-primary badge-pill ml-auto mr-1"    data-toggle="popover" data-content="Complete Surveys To Earn High Amount Of Coins" data-trigger="hover" data-original-title="Surveys" data-placement="bottom">Surveys</span>
                       <span class="badge badge-light-primary badge-pill ml-auto mr-1"    data-toggle="popover" data-content="Earn High Amount Of Coins" data-trigger="hover" data-original-title="Reward" data-placement="bottom">Apps</span><br><br>
                        <div class="row border-top text-center mx-0"></div><br>
<center>
<a class="btn btn-primary" href=<?= base_url() ?>>View</a></center></li>
</ul>
</li>
</div>
</div>
</div>
</div>
   <?php } ?>

You can see how it looks like in my codes. 但正如我所说，我希望它们每 2 张卡在同一行

我真的真的.. 需要帮助我尝试了几个代码，但我无法做到，我使用 bootsrap 并尝试像 2-2 那样划分卡片

Answer 1

使用引导网格系统。

看：https://getbootstrap.com/docs/4.0/layout/grid/

简单示例：

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha512-FOS5ANNUsuvefA5Fm6hZBLsxqfF105LIysEgV8VNz29jZLVYIhI+MOLKPBmMXgkHhARFHf5pE7KbXOLE6TXW0A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="row">
  <div class="col-sm-6 col-md-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>
</body>
</html>