Смещение колонок в OpenCart, Bootstrap 3

264
19 мая 2018, 22:50

работаю в Opencart 3, Bootstrap 3. Сделал footer, но при разрешение sm(меньше 992) колонки смещаются и получается свободное пространство, что делаю не так?

<footer> 
  <div class="container-fluid"> 
    <div class="row"> 
      {% if informations %} 
      <div class="col-md-3 col-sm-6"> 
        <h5>{{ text_information }}</h5> 
        <ul class="list-unstyled"> 
         {% for information in informations %} 
          <li><a href="{{ information.href }}">{{ information.title }}</a></li> 
          {% endfor %} 
        </ul> 
      </div> 
      {% endif %} 
      <div class="col-md-3 col-sm-6"> 
        <h5>{{ text_service }}</h5> 
        <ul class="list-unstyled"> 
          <li><a href="{{ contact }}">{{ text_contact }}</a></li> 
          <li><a href="{{ return }}">{{ text_return }}</a></li> 
        </ul> 
      </div> 
      <div class="col-md-3 col-sm-6"> 
        <h5>{{ text_extra }}</h5> 
        <ul class="list-unstyled"> 
          <li><a href="{{ voucher }}">{{ text_voucher }}</a></li> 
          <li><a href="{{ affiliate }}">{{ text_affiliate }}</a></li> 
          <li><a href="{{ special }}">{{ text_special }}</a></li> 
        </ul> 
      </div> 
      <div class="col-md-3 col-sm-6"> 
				<a href="tel:{{ telephone }}" class="phone" title="Нажми чтобы позвонить нам">{{ telephone }}</a> 
				<a href="mail:{{ email_2 }}" class="email">{{ email_2 }}</a> 
				<a href="lendik.me" class="powered">{{ text_powered }}</a> 
				<div class="soc"> 
					<a href="http://lendik.me" target="_blank"><i class="fa fa-vk"></i></a> 
					<a href="http://lendik.me" target="_blank"><i class="fa fa-twitter"></i></a> 
					<a href="http://lendik.me" target="_blank"><i class="fa fa-instagram"></i></a> 
				</div> 
      </div> 
    </div> 
  </div> 
</footer>

Колонки должны идти в такой порядке: Информация, Служба поддержки, Дополнительно. Но после службы поддержки появляется невидимая колонка. Стилизация не как не влияет пробовал выключать css

Answer 1

в row обвёрнуты все col-sm-6. Таким образом, если в row у блоков разная высота и блоков больше чем на 12 колонок (а сейчас на 24), bootstap выстаивает их в соответствии с их индексом колонок но "гапит" под теми блоками, которые по высоте больше. Т.е. вы наблюдаете, как он компенсирует высоту смежных блоков с разной высотой.

Задайте этим блокам (тем что внутри данного row, первые потомки - col-sm-6) min-height равное высоте самого высокого из них.

READ ALSO
Как подгружаются CSS к таблице

Как подгружаются CSS к таблице

Есть несколько CSS файлов, которые относятся к разным html страницамCSS подгружается, только к нужным классам, которые есть в документе или пока...

205
Как сделать так, чтобы в форме отрабатывали две кнопки с разным функционалом

Как сделать так, чтобы в форме отрабатывали две кнопки с разным функционалом

Есть вот такая вот форма для поиска данных, но проблема в том что вторая кнопка "Удалить фильтр" отрабатывает так-же как и первая(то есть делает...

254
Расположение кнопки под текстом

Расположение кнопки под текстом

Слайдер работает как надо, но как расположить кнопку под текстом? Она у меня идет справа отsm, надо чтоб по середине

350