引导程序-一张分为两张的卡或两张合为一张的卡

Question

如何使用Bootstrap 4做类似的事情？

Answer 1

.twoCard {
display: flex;
}
.cardPart {
width: 100%;
padding: 10px;
}
.cardPart2 {
border-left: 1px solid #ccc;
}

<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="card" style="width: 18rem;">
<div class="twoCard">
  <div class="cardPart cardPart1">Card Part 1</div>
  <div class="cardPart cardPart2">Card Part 2</div>
  </div>
</div>







<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

我用flex CSS分成了两部分。

Answer 2

最简单的方法：

<div class="row">
    <div class="col-md-6">Card-1</div>
    <div class="col-md-6">Card-2</div>
</div>

或者您也可以使用“ flex”

<div class="d-flex justify-content-between">
    <div class="">Card-1</div>
    <div class="">Card-2</div>
    <div class="">Card-3</div>
</div>

---或---

<div class="d-flex justify-content-around">
    <div class="">Card-1</div>
    <div class="">Card-2</div>
</div>