Как мне сделать пустые отступы по бокам сайта на широкоэкранных дисплеях?

Question

[Павел Иванов]

Добрый день. Есть сайт на bootstrap 3:

Есть планка меню, position: fixed. Есть блок div, position: fixed. По бокам пространство - blank, т.е. пустое, отступы-поля. Мне нужно, чтобы они, равно как и весь остальной контент, не растягивались на весь экран, а были в границах 12 колонок bootstrap, как на картинке.

Как это можно сделать?

Answer 1

[Нурсултан Молдобаев]

width:980px;
margin:0px auto;

или

width: 980px;
left: 50%;
margin-left: -490px;
position: relative;

ширина сайта width: 980px;

Comments

[Павел Иванов]

А как сделать ширину фиксированного меню равной 12 колонкам bootstrap? Ведь насколько я понимаю, она меняется в зависимости от экрана, поэтому хардкодить 980 пикселей бессмыленно?..

Answer 2

[Alexander Sydorenko]

Вы кажется как то не правильно готовите bootstrap..

Чтобы отступы у вас были в границах 12 колонок, каждому из отступов надо присвоить какой-то класс колонки.. И уменьшить количество колонок в контентной части:

тынц

Если колонки должны быть только на средних и больших экранах, тогда придется еще им добавлять класс невидимости на малых и экстра-малых, кроме того для малых и экстра-малых будет своя разметка по колонкам.

Comments

[Павел Иванов]

У меня это выглядит так: https://www.uploady.com/#!/download/cERYbE24Au0/Gn... Нужно, чтобы меню слева вверху не сползало в край, а держалось на уровне колонки. Меню с position: fixed.

[Alexander Sydorenko]

Разместите пожалуйста код на jsfiddle, либо лучше на jsbin там бустрап есть, и попытаемся понять друг-друга..

[Павел Иванов]

jsbin.com/mariteduba/2/edit?css

[Alexander Sydorenko]

Для первого меню достаточно изменить на что бы получить то что Вы хотите?

[Павел Иванов]

Немного не понял вопрос, на что изменить что?

[Alexander Sydorenko]

Вот здесь jsbin.com/qicenoyuxu/1/edit?html,css,output если убрать Ваш css(временно удалить, оно сразу отобразит), бустрап себя ведет так Вам нужно?

[Павел Иванов]

Да. Меню сверху navbar-fixed, оно и должно им оставаться. Остальные меню тоже fixed, и они тоже не должны выходить за пределы md-12 (8 и 4).

[Alexander Sydorenko]

Я к тому, что раз без Вашего css оно работает так как надо.. то в первую очередь надо просматривать что не так с вашим css.

[Павел Иванов]

navbar-fixed-top вообще берётся из bootstrap, я его никак не меняю. Я просто хочу, чтобы это меню не захватывало 100% верха экрана, а было размером с #news + #announcements.

[Alexander Sydorenko]

вот здесь jsbin.com/vanevimawu/2/edit?html,css,js,output я пытался воспроизвести ситуацию с двумя фиксед меню из Вашего предыдущего вопроса. Там как раз идея. Какие врапперы и с какими минимальными свойствами должны присутствовать.

[Павел Иванов]

Нет, у меня не так. У меня две колонки. Две колонки с md-8 и md-4. Над двумя колонками находится фиксированное меню в топе. Но это меню не должно быть не полноразмерным (width: 100%, как сейчас), а размером с эти две колонки.

[Alexander Sydorenko]

мы с вами говорим на двух совершенно разных языках.. извините.. я Вам показываю код, в котором (и при каких условиях) фиксед блок может иметь ширину треьуемого контейнера, а не 100% как у вас, а вы мне в ответ, что не.. у меня не так.. у меня еще бордер зелененький..

[Юлия YuKi]

))))))) "Измените мне, ничего не меняя в коде" - это хороший запрос. :)