0

Верстаю макет на bootstrap3. Столкнулся с такой проблемой.

Мне необходимо разместить изображения в 3 колонки, НО! изображения большого размера (width и height) и они не помещаются в сетке т.к. уже два изображения по факту занимают все 12 колонок.

Вот мой код:

<div class="container">
    <div class="row no-gutter">
        <div class="col-md-offset-1 col-md-3">
            <div class="left-photo">
                <img src="img/main-picture/picture-left.jpg">
            </div>
        </div>
        <div class="col-md-4">
            <div class="picture-center">
                <img src="img/main-picture/picture-center.jpg">
            </div>
        </div>
        <div class="offset-1 col-md-3">
            <div class="picture-right">
                <img src="img/main-picture/picture-main-right.jpg">
            </div>
        </div>
    </div>
</div>

Заранее спасибо!

2
  • 1
    необходимо добавить класс для img - img-responsive. Пример - jsfiddle.net/soledar10/L1gdLztn
    – soledar10
    2 сен 2017 в 18:23
  • СПАСИБО! Всё ок!
    – brain
    2 сен 2017 в 18:27

1 ответ 1

0

Добавьте изображениям класс img-responsive. С его помощью Бутстрап задаёт изображениям три свойства:

display: block;
max-width: 100%;
height: auto;

Свойство max-width не позволит изображениям выходить за края своих колонок.

Получится:

<div class="container">
    <div class="row no-gutter">
        <div class="col-md-offset-1 col-md-3">
            <div class="left-photo">
                <img class="img-responsive" src="img/main-picture/picture-left.jpg">
            </div>
        </div>
        <div class="col-md-4">
            <div class="picture-center">
                <img class="img-responsive" src="img/main-picture/picture-center.jpg">
            </div>
        </div>
        <div class="offset-1 col-md-3">
            <div class="picture-right">
                <img class="img-responsive" src="img/main-picture/picture-main-right.jpg">
            </div>
        </div>
    </div>
</div>
4
  • СПАСИБО! Всё ок!
    – brain
    2 сен 2017 в 18:27
  • Я с бутсрап ещё не работал. Много по нему вопросов) Не скажите может быть есть какой-то список основных классов бутсрап? на сайте у них ничего такого не нашёл.
    – brain
    2 сен 2017 в 18:33
  • 1
  • Спасибо за азбуку бутстрап)
    – brain
    2 сен 2017 в 18:47

Ваш ответ

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

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