[X] Помощник

[Art_sf Topic Starter]

Здравствуйте. дело вот в чем: 
на этой странице http://artseoy1.beget.tech/dvigateli/ есть фильтр товаров по середине, и он распластан на всю ширину, кто знает, как через CSS сделать две-три колонки?
чтобы выглядело примерно как тут фильтр http://motorbor.by/
заранее спасибо.

[fedornabilkin]

Так на том сайте и посмотри как сделано. Кликаешь правой кнопкой и инспектируешь элемент. Инспектор покажет тэги и правила к ним.

[yury_mw]

Здравствуйте. дело вот в чем:  на этой странице http://artseoy1.beget.tech/dvigateli/ есть фильтр товаров по середине, и он распластан на всю ширину, кто знает, как через CSS сделать две-три колонки?

 
В принципе сделать то несложно. Примерно так:
В стилевом файле bootstrap.min.css есть правила для блоков с фильтрами. Выглядят они вот так:
 

.list-group{padding-left:0;margin-bottom:20px}
.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}

 
Если классу .list-group-item добавить обтекание и ширину в 50% ширины родителя (добавляем правила float:left;width:50%;), то получится 2 колонки:
 

.list-group-item{padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd;float:left;width:50%;}

 
Родителю .list-group не забыть добавить очистку потока (добавляем правило overflow:hidden;), чтоб обтекание после него прекратить:
 

.list-group{padding-left:0;margin-bottom:20px;overflow:hidden;}

 
Получится как-то так:

 
Если ширину установить в 33%, то будет 3 колонки и т.д.

Но есть одно НО: Как повлияют и повлияют ли эти изменения на другие страницы предсказать сложно.

Сообщение отредактировал yury - 3.3.2018, 12:32

[fedornabilkin]

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

<div class="row">
<div class="col-xs-12 col-sm-6">block</div>
<div class="col-xs-12 col-sm-6">block</div>
</div>

col-xs-12 говорит, чтобы на очень маленьких мониторах блок был на всю ширину, а col-sm-6 говорит, чтобы на маленьких и выше блок был на пол ширины.

[Art_sf Topic Starter]

yury_mw, спасибо большое!! а можете подсказать, как проделать тоже самое, но вот тут на главной.
http://artseoy1.beget.tech/

[fedornabilkin]

Audir853, будь человеком, пожалуйста. Очень я не хотел отвлекаться на это, и когда выделил время, то не обнаружил никакого фильтра  на главной  :diablo:
Чтобы решить вопрос, предоставь код, который отвечает за отображение фильтра. Перед экспериментами, обязательно сделай бэкап.

[yury_mw]

@yury, спасибо большое!! а можете подсказать, как проделать тоже самое, но вот тут на главной.
http://artseoy1.beget.tech

 
Примерно так же и делается:
В стилевом файле style.css есть такое правило:

.mfilter-content > ul > li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Если элементу списка добавить обтекание и ширину в 50% ширины родителя (добавляем правила float:left; width:50%), то получится 2 колонки:

.mfilter-content > ul > li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  float:left;
  width:50%;
}

Получится как-то так:


Но не уверен, что здесь стоит делать 2 колонки, т.к. первый из фильтров имеет сложную структуру, и при небольшой ширине экрана начинает занимать несколько строк, сбивая вид:

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.

Сообщение отредактировал yury - 13.3.2018, 17:18