Bootstrap 将元素置于另一个之下答案

【问题标题】：Bootstrap Placing Elements one under anotherBootstrap 将元素置于另一个之下
【发布时间】：2019-01-08 05:38:04
【问题描述】：

我正在使用引导程序将一些卡片放在另一张附近，但我真的不能这样做，因为它总是将卡片放在另一张下面。

<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>

基本上我需要这两张卡在同一行，一张接一张，但我不明白出了什么问题。这些卡是不是太大了？

【问题讨论】：

标签： javascript html css bootstrap-4 positioning

【解决方案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>

【讨论】：

非常感谢！