Как добавить отступ между картами в начальной загрузке

Question

У меня есть ряд, состоящий из 8 карт.Я хочу, чтобы все это было в одной строке.С левой стороны есть поле с размером столбца 2, и я установил каждую карту размером 1 (так что 8 + 2 = 10). Но тогда моя строка перепутана.

В настоящее время мой код для границы

<div class="row">
<div class="col-sm-2">
<div class="card-header"> Discover new genres {{genre}}</div>
</div>
  <div class="col-lg-1 text-center">
    <div class="card border-secondary mb-3" style="width: 10rem;">
      <img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}"> 
</img>
   <div class="card-block">
    <div class="card-body"><p class="card-title text-center "><small>{{rec["name"]}}</small></p></div>
   </div>
    </div>
</div> 
</div>

Я хочу, чтобы карта имела такую ​​ширину (чтобы карта не была маленькой). МожетПереполнение в правой части экрана. Как мне это сделать?

Answer 1

Проблема связана с вашим встроенным стилем width:10rem. Он заменит ширину col-lg-1, если она больше ширины столбца. Удаление этого встроенного стиля приводит к ожидаемому поведению.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-4">
      <div class="card-header"> Discover new genres {{genre}}</div>
    </div>

    <div class="col-4 text-center">
      <div class="card border-secondary mb-3" style="">
        <img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}"> 
        <div class="card-block">
          <div class="card-body">
            <p class="card-title text-center">
              <small>{{rec["name"]}}</small>
            </p>
          </div>
        </div>
      </div>
    </div> 

    <div class="col-4 text-center">
      <div class="card border-secondary mb-3" style="">
        <img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}"> 
        <div class="card-block">
          <div class="card-body">
            <p class="card-title text-center">
              <small>{{rec["name"]}}</small>
            </p>
          </div>
        </div>
      </div>
    </div> 
    
  </div>
</div>

Для целей этого примера я изменил ваши точки останова на столбцы, чтобы они работали лучше, когда вы выбираете «Выполнить фрагмент кода». Я подозреваю, что вы применяли встроенную ширину, потому что col-lg-1 слишком мало; в этом случае я рекомендую рассмотреть большую точку останова столбца вместо встроенных стилей, переопределяющих поведение сетки.