Question

我试图把4张牌放在一排。当我放2张牌时，间距相等。但是，当我将第三张卡放在同一行时，尽管使用了相同的代码，但它与另一张卡重叠。我试过改变这个值无济于事。如何在不使用自定义CSS的情况下解决此问题？

Answer 1

试试这个

<div class="container-fluid">
  <div class="row">
    <div class="col-3">
      <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>

    </div>
    <div class="col-9">
      <h4>Recently sold items</h4>
    </div>
      <div class="row">

        <div clas="col-lg-3">
          <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="..." alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>



       <div class="col-lg-3">
          <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="..." alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>

    <div class="col-lg-3">
          <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="..." alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
             </div>
        </div>
    </div>

      </div>

    
  </div>
 </div>

Answer 2

3张卡片中的第一张有一个拼写错误：clas=而不是class=。

https://www.codeply.com/go/fl6AA76Io0

<div class="container-fluid">
    <div class="row">
        <div class="col-3">
            <ul class="list-group">
                ...
            </ul>
        </div>
        <div class="col-9">
            <h4>Recently sold items</h4>
            <div class="row">
                <div class="col-lg-3">
                    <div class="card">
                        ..
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card">
                        ..
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card">
                        ..
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card">
                        ..
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Bootsrap 4柱卡重叠

2 个答案: