Карты Bootstrap4 не выстраиваются рядом друг с другом. Укладка вместо

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

Это зависит от того, какой будет ваша точка останова. Если вы поместите каждую карту в col-sm-6, а не col-md-6 div, она, вероятно, обернет две из них в одну строку. И помните, классы container и row имеют ширину 100%, поэтому карточки должны быть внутри них (особенно внутри row).

Answer 2

Все четыре карты должны быть в пределах одного деления 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>