Добавляйте пробелы между столбцами без потери компоновки сеточной системы - PullRequest
Новая
       83

Добавляйте пробелы между столбцами без потери компоновки сеточной системы

1 голос
/ 17 июня 2020

Я хочу добавить пробелы между столбцами, не теряя макета системы сетки, когда я добавляю маржу на карту, макет становится 3 картами, а не 4

вот код, проблема в том, что я не могу контролируйте интервал между картами, в каждом ряду должно быть четыре карты 

 <div class ="container">
  <div class ="row">
    <div class ="d-flex flex-wrap">
        <div class ="card p-0 col-12 col-lg-3">
           <img src = "#">
           [i write the title here]<p> .... </p>
        </div>
         <div class ="card p-0 col-12 col-lg-3">
           <img src = "#">
           <p> .... </p>
        </div>
        <div class ="card p-0 col-12 col-lg-3">
           <img src = "#">
           <p> .... </p>
        </div>
        <div class ="card p-0 col-12 col-lg-3">
           <img src = "#">
           <p> .... </p>
        </div>
    </div>
  </div>
 </div>

<style>
.card img{
width:100%;
}
..card p{
width:100%;
color : green;
font-size :18px;
float:right
}
</style>

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Подобные вопросы задавались раньше:

Расстояние между столбцами и размер столбцов с использованием Bootstrap 4
Bootstrap: добавить отступы / отступы между столбцами

Отрегулируйте интервал, отрегулировав отступ. Кроме того, card должен быть внутри столбцов, а столбцы всегда внутри row. Например, здесь px-4 увеличивает интервал: 

<div class="row">  
    <div class="col-12 col-lg-3">
        <div class="card">
            <img src="#"> [i write the title here]<p> .... </p>
        </div>
    </div>
    <div class="px-4 col-12 col-lg-3">
        <div class="card">
            <img src="#">
            <p> .... </p>
        </div>
    </div>
    <div class="px-4 col-12 col-lg-3">
        <div class="card">
            <img src="#">
            <p> .... </p>
        </div>
    </div>
    <div class="col-12 col-lg-3">
        <div class="card">
            <img src="#">
            <p> .... </p>
        </div>
    </div>
</div>

Demo

0 голосов
/ 17 июня 2020

Поскольку мы не можем увидеть все ваши CSS, я не знаю, точно ли это, но попробуйте использовать grid-row-gap и grid-column-gap для интервала между строками и расстояния между столбцами. Вы также можете использовать grid-template-columns, чтобы указать, сколько столбцов вы хотите.

Надеюсь, это поможет !! Тильер

...