Question

  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-3">
        <div class="card">
            <img class="card-img-top" src="Castle.jpg" alt="Card image fluid">
            <div class="card-body">
                <h3 class="card-title">Magic Kingdom</h3>
                <p>Walt Disney World's most popular park! Full of Attractions, characters, dining, and fireworks!</p>
                <a href="#" class="btn btn-primary">Learn More!</a>
              </div>
            </div>
          </div>
        </div>
      </div>

这是我一张卡的代码。我粘贴了此代码四次，因为我想要4张不同的卡，但是这些卡却堆叠在一起，而不是并排放置。我该如何解决？谢谢您的帮助，这真的让我感到困扰。

Answer 1

所有四张卡都应位于class="row"的一格之内。由于将卡片放在不同的行标签中，所以卡片彼此叠放。

<div class="row">
  <!--   Card 1 -->
  <div class="col-md-6 col-lg-3">
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="Castle.jpg" alt="Card image fluid">
      <div class="card-body">
        <h3 class="card-title">Magic Kingdom</h3>
        <p>Walt Disney World's most popular park! Full of Attractions, characters, dining, and fireworks!</p>
        <a href="#" class="btn btn-primary">Learn More!</a>
      </div>
    </div>
  </div>

  <!--   Card 2 -->
  <div class="col-md-6 col-lg-3">
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="Castle.jpg" alt="Card image fluid">
      <div class="card-body">
        <h3 class="card-title">Magic Kingdom</h3>
        <p>Walt Disney World's most popular park! Full of Attractions, characters, dining, and fireworks!</p>
        <a href="#" class="btn btn-primary">Learn More!</a>
      </div>
    </div>
  </div>

  <!--   Card 3 -->
  <div class="col-md-6 col-lg-3">
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="Castle.jpg" alt="Card image fluid">
      <div class="card-body">
        <h3 class="card-title">Magic Kingdom</h3>
        <p>Walt Disney World's most popular park! Full of Attractions, characters, dining, and fireworks!</p>
        <a href="#" class="btn btn-primary">Learn More!</a>
      </div>
    </div>
  </div>

  <!--   Card 4 -->
  <div class="col-md-6 col-lg-3">
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="Castle.jpg" alt="Card image fluid">
      <div class="card-body">
        <h3 class="card-title">Magic Kingdom</h3>
        <p>Walt Disney World's most popular park! Full of Attractions, characters, dining, and fireworks!</p>
        <a href="#" class="btn btn-primary">Learn More!</a>
      </div>
    </div>
  </div>

</div>

Answer 2

这取决于您的断点。如果将每张卡都包裹在col-sm-6格上，而不是col-md-6格上，则可能会将其中两张卡包在同一行上。请记住，container和row类的宽度为100％，因此卡片必须在其中（特别是在row内部）。

Bootstrap4卡没有彼此相邻排列。堆叠

2 个答案: