Как настроить маржу в ответ?

Question

Я пытаюсь установить div с бутстрапом.

Моя проблема в том, что мне нужно иметь заданное поле слева и справа от div. Используя col-md-10, я не получу поля, который мне нужен. Ширина экрана превышает 10 пикселей.

Например:

<div class="col-md-offset-1 col-md-10"> 
    //contents... 
</div> 

------------------------------------- 
| --------- div -------------- 
|10px margin    10px margin 
| |        | 
| |        | 
| ------------------------------- 
------------------------------------- 

Кто-нибудь есть идея о том, как это исправить? Большое спасибо!

Answer 1

Если я понимаю, что вы всегда хотите margin значение 10px с каждой стороны. Вы можете создать собственный класс и использовать calc(), попробуйте следующее:

<div class="col-md-offset-1 col-md-10 margin"> 
    //contents... 
</div> 

.margin { 
    margin:0 10px; 
    width:calc(100% - 20px); 
} 

Проверить это BootplyDemo

---

Другим вариантом может быть пользовательским класс на контейнер и использовать padding. Попробуйте:

<div class="container margin"> 
    <div class="col-xs-12"> 
     //contents... 
    </div> 
</div> 

.margin { 
    width:100%; 
    padding:0 10px; 
} 

Другой BootplyDemo

Answer 2

Вы должны использовать класс container-fluid в своем основном разделе контента.

<div class="container-fluid"> 
    <!-- Contents --> 
</div> 

Что это делает создает полную ширину контейнера с небольшим количеством заполнения справа и слева, сверху и снизу, что ответно изменяет размер на основе ширины вашего браузера.

Надеюсь, это поможет!