1

Добрый день, при создание блока с картинка возникла проблема что при сужение все валиться куда попало, хотелось бы чтоб переносилось по 2 блока. И нижние картинки были по центру, с помощью бутстрап

<div class="preim">
<div><img src="" alt=""><p></p></div>
    <div><img src="" alt=""><p></p></div>
    <div><img src="" alt=""><p></p></div>
    <div><img src="" alt=""><p></p></div></div>
<div class="preim">
    <div><img src="" alt=""><p></p></div>
    <div><img src="" alt=""><p></p></div>
    <div><img src="" alt=""><p></p></div>
</div> </div>
</div>

ссылка на страницу http://advancedfood.ru/o_kompanii

3 ответа 3

1

Зачем Вам это? У Вас бутстрап подключен же.

<div class = "row">
    <div class = "col-md-3">...</div>
    <div class = "col-md-4">...</div>
    ....
 </div>

Всё давно придумано. С таким вариантом ничего никуда не поползет. Плюсом, можно настроить отобрадение на разных устройствах как нужно.

Ознакомиться с сеткой Bootstrap можно тут: https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

На русском: http://bootstrap-3.ru

0

Если вам не нужна поддержка IE9 (что вряд ли), то используйте для этого flexbox http://html5.by/blog/flexbox/

Сейчас же все валится туда, куда должно :-)

0

Предлагаю воспользоваться возможностями уже подключенного к сайту бутстрапу. Попробуй такую структуру.

<div class="row">
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
</div>
<div class="row">
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
</div>

Класс text-center - в бутстрапе выравнивает содержимое блока по центру.

"row" обозначает ряд, а col-md-1 - ячейки (столбец).

Бутстрап сам решает, какое кол-во картинок ему переносить в зависимости от сужения и размера картинки. Разные телефоны имеют разные расширения, если на одном телефоне оптимально - 2, то на другом это одна картинка в "ряду" или три. Предлагаю не переживать по этому поводу. Если две штуки на ряд - это категорично, напиши. Подправим код

5
  • Никто бутстрап не просил.
    – Qwertiy
    26 июн 2017 в 12:38
  • Qwertiy, я код сайта посмотрел. Бутстрап уже подключен.
    – raingo
    26 июн 2017 в 12:39
  • да, по возможности бутстрап, спасибо 26 июн 2017 в 12:50
  • но не сработало, теперь все в один столбец 26 июн 2017 в 12:52
  • цифры должны быть одинаковые.
    – raingo
    26 июн 2017 в 12:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.