Bootstrap Размещение элементов один под другим - PullRequest
Новая
       13

Bootstrap Размещение элементов один под другим

0 голосов
/ 08 января 2019

Я использую начальную загрузку, чтобы расположить несколько карт одну рядом с другой, но на самом деле я не могу это сделать, потому что она всегда помещает карты одна под другую. 

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

В основном мне нужно, чтобы эти две карты были в одном ряду и одна за другой, но я не понимаю, в чем дело. Эти карты слишком большие?

1 Ответ

0 голосов
/ 08 января 2019

Проблема в том, что у вас есть определение встроенного стиля для ваших карт: 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>
...