Блог

Главная - Вопросы по программированию - как выделить пространство между столбцами, которые находятся один над другим в bootstrap

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

#html #css #bootstrap-4 #row #spacing

#HTML #css #bootstrap-4 #строка #интервал

Вопрос:

у меня есть веб-сайт, созданный в bootstrap, на котором я перечисляю некоторые данные с использованием PHP, поэтому у меня есть 18 категорий, 18 категорий перечислены в столбцах в одной строке, код которых выглядит следующим образом:

 <div class="row">
  <?php foreach($categories as $val){?>
  <div class="col-xl-2 col-sm-6">
    <div class="card bg-card-light bg-primary-card bg-white">
      <div class="card-body">
        <div class="cat-item text-center">
          <a href="<?= base_url();?>categories?category=<?= $val->category_name?>"></a>
          <div class="cat-icon bg-primary-transparent brround text-primary">
            <!-- <i class="fa fa-hospital-o"></i> -->
            <img src="<?= base_url()?>uploads/categoryicon/<?= $val->category_icon?>">
          </div>
          <div class="cat-desc">
            <h5 class="mb-2">
              <?= $val->category_name?>
            </h5>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php }?>



</div>

введите описание изображения здесь

как вы можете видеть на этом рисунке, 1-я группа столбцов и вторая группа столбцов очень близки друг к другу, кто-нибудь может сказать мне, как указать интервал между ними. заранее спасибо

Ответ №1:

Вы можете добавить отступы к нижнему элементу.

Я добавил фрагмент, используя ваш код, и использовал пример изображения и текста.

Это единственный добавленный css:

 .mb-2 {
padding-top: 30px;
background-color: black;
color: white;
}

Кроме того, если вы хотите настроить таргетинг на весь нижний div, вы можете использовать margin класс div следующим образом:

 .cat-desc {
margin-top: 30px;
background-color: black;
color: white;
}
  

 .mb-2 {
padding-top: 30px;
background-color: black;
color: white;
}  
 <div class="row">
  <?php foreach($categories as $val){?>
  <div class="col-xl-2 col-sm-6">
    <div class="card bg-card-light bg-primary-card bg-white">
      <div class="card-body">
        <div class="cat-item text-center">
          <a href="<?= base_url();?>categories?category=<?= $val->category_name?>"></a>
          <div class="cat-icon bg-primary-transparent brround text-primary">
            <!-- <i class="fa fa-hospital-o"></i> -->
            <img src="https://cdn.pixabay.com/photo/2020/08/25/18/28/workplace-5517744__340.jpg">
          </div>
          <div class="cat-desc">
            <h5 class="mb-2">
              Bottom
            </h5>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php }?>



</div>