javascript - Bootstrap 将元素一个接一个地放置

Question

我正在使用 bootstrap 将一些卡片一张一张放在另一张旁边，但我真的做不到，因为它总是将卡片一张放在另一张下面。

<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="col-sm-2">
        <div class='card' style='width:20rem;'>
          <img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
            alt='Card image cap'>
          <div class='card-body text-center'>
            <p class='card-text text-center' style='color: black'> Car</p>
            <ul class='list-group list-group-flush'>
              <li class='list-group-item'>
                <div class='row'>
                  <div class='col-md-6'>
                    <i class='material-icons'>&#xe227;</i><span> Price </span>
                  </div>
                  <div class='col-md-6'>
                    <i class='material-icons'>&#xe0c8;</i><span>City</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col-sm-2">
        <div class="card" style='width:20rem;'>
          <img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
            alt='Card image cap'>
          <div class='card-body text-center'>
            <p class='card-text text-center' style='color: black'> Car</p>
            <ul class='list-group list-group-flush'>
              <li class='list-group-item'>
                <div class='row'>
                  <div class='col-md-6'>
                    <i class='material-icons'>&#xe227;</i><span> Price </span>
                  </div>
                  <div class='col-md-6'>
                    <i class='material-icons'>&#xe0c8;</i><span>City</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-4 offset-1">
    </div>
  </div>
</div>

基本上我需要将这两张卡片放在同一行并且一张接一张，但我不明白哪里出了问题。这些卡片太大了吗？

Answer 1

问题出在卡片的内联样式定义上:width: 20rem。本质上，您给卡片 2/12 的网格以使用 (col-sm-2)，然后给出卡片的硬定义，使其宽度为 20rem，这会强制下一张卡片占用下一行。

此外，您还需要在 col-8 声明之后指定另一行。这是我的代码:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="row">
        <div class="col-sm-6">
          <div class='card'>
            <img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
            <div class='card-body text-center'>
              <p class='card-text text-center' style='color: black'> Car</p>
              <ul class='list-group list-group-flush'>
                <li class='list-group-item'>
                  <div class='row'>
                    <div class='col-md-6'>
                      <i class='material-icons'>&#xe227;</i><span> Price </span>
                    </div>
                    <div class='col-md-6'>
                      <i class='material-icons'>&#xe0c8;</i><span>City</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="card">
            <img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
            <div class='card-body text-center'>
              <p class='card-text text-center' style='color: black'> Car</p>
              <ul class='list-group list-group-flush'>
                <li class='list-group-item'>
                  <div class='row'>
                    <div class='col-md-6'>
                      <i class='material-icons'>&#xe227;</i><span> Price </span>
                    </div>
                    <div class='col-md-6'>
                      <i class='material-icons'>&#xe0c8;</i><span>City</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-4 offset-1">
    </div>
  </div>
</div>