Установите маржу на bootstrap столбцов, не влияя на ширину - PullRequest
Новая
       148

Установите маржу на bootstrap столбцов, не влияя на ширину

0 голосов
/ 06 августа 2020

Я пытаюсь отобразить список увеличения ширины карты. Я сделал свой html так: 

<div class="card-deck">
    <div class="card card-widget col-sm-2 m-2">
        <div class="card-body text-center">
            TEXT
        </div>
    </div>
    <div>
        etc...
    </div>
</div>

Проблема в том, что поля, кажется, увеличивают ширину карт. Итак, он делает что-то вроде этого ... (он должен отображать 4 столбца)

экран 1

Если я удалю поля, он сделает что-то вроде ...

экран 2

Спасибо за помощь!

Ответы [ 3 ]

0 голосов
/ 06 августа 2020

Маржа не может так увеличить ширину карты. Однако это определенно увеличит ширину контейнера.

ПОДХОД 1: Проверьте код ниже. Он назначит карточкам одинаковую ширину.

ПРИМЕЧАНИЕ: Это работает как функция строки-столбца bootstrap. Таким образом, вам нужно добавить n элементов card в card-deck для количества столбцов n. 

<div class="card-deck mx-2 mt-2">
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
</div>
<div class="card-deck mx-2">
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
</div>

ПОДХОД 2: Если вы не хотите менять ширину карты: 

<div class="card-deck m-2 mb-0 justify-content-center">
  <div class="card card-widget col-sm-2 m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col-sm-2 m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col-sm-2 m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col-sm-2 m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
</div>
0 голосов
/ 06 августа 2020

Спасибо за ответы. Однако это не решает мою проблему: (

Первое решение: я не могу сделать это легко, потому что я получаю их из базы данных, поэтому я не знаю, сколько элементов будет возвращено, и я действительно хочу создать новая колода на каждые 4 карты. Центр контента justify не очень элегантен и решает проблему

Второе решение: похоже на мой второй экран: https://i.stack.imgur.com/erkcT.jpg

0 голосов
/ 06 августа 2020

Вы должны использовать отступы, без полей, если вы не хотите изменять размер карточек.

изменить 

        <div class="card card-widget col-sm-2 m-2">

с этим 

       <div class="card card-widget col-sm-2 p-2">


<div class="card-deck">
    <div class="card card-widget col-sm-2 p-2">
        <div class="card-body text-center">
            TEXT
        </div>
    </div>
    <div>
        etc...
    </div>
</div>
...