Блог

Главная - Вопросы по программированию - Почему некоторые из моих столбцов сетки складываются?

Почему некоторые из моих столбцов сетки складываются?

#css #bootstrap-4

Вопрос:

Я хотел бы заказать свои загрузочные карты таким образом: введите описание изображения здесь

Мой код таков:

 <div class="row ">
  <div class="col-12 col-md-6 mb-1" style="height: 75vh;">
    <div class="map svelte-xu5vn1" id="map">
      ...
    </div>
  <div class="col-12 col-md-6">
    <div class="col-6">
      <a rel="prefetch" href="communes/xxx/objects/Cykelhus">
        <div class="card  mr-1 mb-1">
          <div class="card-body text-center">
            <img class="card-img-top" src="img/300x300/cykelhus.thumb.jpg" alt="(image)">  
            <p class="card-text">Cykelhus</p>
          </div>
        </div>
      </a>
    </div>
    <div class="col-6">
       <a rel="prefetch" href="communes/brf_masthugget/objects/Sedumtak">
         <div class="card  mr-1 mb-1">
         ... as per the above

Но я получаю такой результат:
введите описание изображения здесь

Что мне нужно изменить?

Комментарии:

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

2. Просто увидел это после публикации моего ответа, спасибо 🙂

Ответ №1:

Исправлено, мне нужно было добавить a <div class="row"> перед первой из карт:

 <div class="row">
  <div class="col-6">
    <a rel="prefetch" href="communes/xxx/objects/Cykelhus">
    ...

И, конечно, закрой его.

хм, конечно, я уже пробовал это …

Метки: