Jump to content
Sign in to follow this  
Ziner

Как отобразить 5 товаров подряд, а не 4 в модуле «Рекомендуемые» на главной странице?

Recommended Posts

Я настраиваю OpenCart-3 (Bootstrap v3.3.5) на главной странице, на которой показан модуль Рекомендуемые, в котором есть 10 продуктов. По умолчанию они отображаются по 4 штуки подряд. Всего получено 3 строки: 4, 4, 2 товара. Мне нужно, чтобы они отображались в 2 рядах по 5 товаров.

 

Я нашел файл featured.twig и строку в нем. Сменив col-lg-3 на col-lg-2, я могу добиться отображения товара по 6 подряд, но не могу понять, как отобразить ровно 5 подряд.

Полагаю что решение не в этом файле, хотя понять не могу.

featured.twig:

{% for product in products %} 
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">

 

 

Я ожидаю, что результат будет:

 

 spacer.png

 

 

Но фактический результат: 

 

spacer.png

Share this post


Link to post
Share on other sites

Бутстрап по умолчанию не умеет строить сетку в 5 колонок. Однако это легко поправимо, загуглите "bootstrap 5 колонок" и найдете решение.

Share this post


Link to post
Share on other sites
10 минут назад, sammygr сказал:

Бутстрап по умолчанию не умеет строить сетку в 5 колонок. Однако это легко поправимо, загуглите "bootstrap 5 колонок" и найдете решение.

 

Спасибо решение найдено
selection-studio.com/5-kolonok-v-bootstrap

 

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

Share this post


Link to post
Share on other sites
46 минут назад, buslikdrev сказал:
  Скрыть контент


.bus-col-lg-24{float:left}
.bus-col-md-24{float:left}
.bus-col-sm-24{float:left}
.bus-col-xs-24{float:left}
.bus-col-lg-24{position:relative;min-height: 1px;padding-right:15px;padding-left:15px}
.bus-col-md-24{position:relative;min-height: 1px;padding-right:15px;padding-left:15px}
.bus-col-sm-24{position:relative;min-height: 1px;padding-right:15px;padding-left:15px}
.bus-col-xs-24{position:relative;min-height: 1px;padding-right:15px;padding-left:15px}
@media (min-width:1200px) {
.bus-col-lg-24{width:20%;}
}
@media (min-width:992px) and (max-width:1199px) {
.bus-col-md-24{width:20%}
}
@media (min-width:768px) and (max-width:991px) {
.bus-col-sm-24{width:20%}
}
@media (max-width:767px) {
.bus-col-xs-24{width:20%}
}

 

 

лишний вес!

 

не ужели незя место  

.bus-col-md

сделать к примеру .bcm? 

я стандартный бутстрап col-sm-12 к примеру меняю сразу на csm12

  • +1 1

Share this post


Link to post
Share on other sites
11 минут назад, Ptenec сказал:

я стандартный бутстрап col-sm-12 к примеру меняю сразу на csm12


Одни в своих шаблонах вообще бутстрап убирают, другие сокращают название классов бутстрапа, гениально:ugeek:

А потом покупатели жалуются, что модули корява отображаются. 

И все ради чего? Ради того, чтобы сайту ПС давал больше баллов(не факт что даст, но все равно нужно это делать)

 

П.С. В данной момент говорю про ОС, а не про верстку вообще.

  • +1 1

Share this post


Link to post
Share on other sites
11 минут назад, Bn174uk сказал:


Одни в своих шаблонах вообще бутстрап убирают, другие сокращают название классов бутстрапа, гениально:ugeek:

А потом покупатели жалуются, что модули корява отображаются. 

И все ради чего? Ради того, чтобы сайту ПС давал больше баллов(не факт что даст, но все равно нужно это делать)

 

П.С. В данной момент говорю про ОС, а не про верстку вообще.

эм  я говорю именно про col-**-**
я также подстраивая под клиента или себя убираю бутстрап! 
а вот col-**-** оставляю!
и некоторые стили! 
так проще и привычнее! в бутстрапе много того что не нужно если ты подстраиваешь под себя или клиента!
тут выбор за теми кто делает сайт и для кого

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.