Bootstrap4 卡片不挨着排队。堆叠而不是

问题描述 投票:0回答:1
  <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张不同的卡片,但是这些卡片是叠在一起的,而不是并排的,我该如何解决?谢谢你的帮助,这真的让我很困扰。

html css twitter-bootstrap
1个回答
0
投票

所有的四张卡都应该在一个div的范围内。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>

0
投票

这取决于你的断点如何。如果你把每张卡都包在一个 col-sm-6col-md-6 div,它可能会将其中的两个包在同一条线上.并且记住。containerrow 类的宽度为100%,所以卡片必须在它们的内部(内有 row 特别是)。)

© www.soinside.com 2019 - 2024. All rights reserved.