0

В верстке использую bootstrap, но у класса container уже прописаны все необходимые вещи для адаптивности, а мне нужно изменить ширину, для этого использовала id="container", чтобы прописать желаемую ширину, но когда смотрю сайт на разных устройствах появляется(небольшой) горизонтальный скрол. Я проверила, что если использовать class="container", то он исчезает, но ширина блока не такая как мне нужна. подскажите как решить вопрос?

#container {
max-width: 950px;
margin: 0 auto;
max-height: 100%;
}
.block{
border: 2px solid black;
border-radius:10px;
width: 100%;
max-width: 954px;
height: auto;
position: relative;
overflow: hidden;
margin: 0;
}
<div id="container">
<div class="row">
    <div class="col-lg-12">
        <div class="block">
            lll
        </div>
    </div>
</div>
</div>

2
  • Предоставьте рабочий пример кода. И уточните какой bootstrap ? 3 или 4 ? Если 3 - сетку в конструкторе переоопределить.
    – Arbery
    15 июн 2018 в 16:32
  • @Kjuri, bootstrap 4, код предоставила
    – maRIA M.
    15 июн 2018 в 16:40

1 ответ 1

0

Все решилось. Нужно сначала подключить свой css файл после bootstrap, а потом прописать медиа запрос.

@media (min-width: 1200px) {
    .container{
        max-width: 950px;
         margin: 0 auto;
  max-height: 100%;
    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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