Bootstrap Контейнер Жидкость не 100%

-1

я пытаюсь добиться следующего:Bootstrap Контейнер Жидкость не 100%

Фон серый на полную строку.
Фоновое изображение на середине с размером 60%, или, скорее, я бы хотел, чтобы этот div содержал только 60% посередине и все содержимое на самом фоне.

Проблема в том, что в левой и правой части контейнера есть пустое пространство, а не полная ширина. Я думаю, что его проблема с bootstrap, я попробовал Google и пробовал много, но все равно не решает.

Надеюсь, кто-то может мне помочь. Сказал (а) спасибо!

Мой демо-сайт: http://128.199.129.158/

источник

2015-05-12 Hyde Han Fu

Вы можете использовать инспектор браузера или firebug, чтобы узнать, что происходит в DOM. – Loenix

Возможный дубликат [100% ширины Twitter Bootstrap 3 template] (http://stackoverflow.com/questions/18449918/100-width-twitter-bootstrap-3-template) – pbenard

просто удалить <div class="col-xs-12">, потому что она дает отступы от левой и правой стороны, удалив его, вы не получите белое пространство слева и справа

источник

2015-05-12 05:14:16

Согласовано. Для вас нет необходимости иметь контейнер на этом уровне. Навигация, вероятно, должен находиться в теге

или вообще ничего. –

-1

изменить ниже в вашем bootstrap.min.css

.container-fluid 
{ 
padding-left:0; 
padding-right:0; 
}

источник

2015-05-12 05:02:38

Мы никогда не должны изменять исходные файлы, но у него есть использовать его правильно. – Loenix

, тогда он может написать его в своем собственном css и убедиться в важности; –

-2

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

Самый простой способ решить вашу проблему - удалить .container-fluid, очистить свой фон от раздела и определить внутриконтейнер внутри.

Exemple:
Полное меню Фон
--Container меню
---- Меню
Slider Фон
--Container ползуна
---- Slider
Promo Название фона
--Container в Promo Название
---- Promo Название

источник

2015-05-12 05:08:37 Loenix

Я бы порекомендовал вам создать этот класс:

.nopadding { 
    padding: 0 !important; 
    margin: 0 !important; 
}

Добавьте его к первым Col-хз-12 на вашем примере.

.nomargin также может быть полезным в ближайшем будущем.

Уже обсуждалось здесь Remove padding from columns in Bootstrap 3

источник

2015-05-12 05:09:24 alebruck

Это то, что вы после этого? Fiddle.

.top-banner{ 
background-image: url("http://128.199.129.158/background.png"); 
background-repeat: repeat; 
background-position: center center; 
background-size: 100%; 
width:60%; 
margin-left: 20%; 
} 
#nav 
{ 
z-index:1000; 
margin-left: -15px; 
} 
.bg-gray{ 
background-color: #777; 
}

источник

2015-05-12 05:17:06 AngularJR

Я еще раз посмотрел на ваш код. И я вижу, что эта основная проблема, которую вы оставили в левой части слева, на самом деле является первым div, в котором у вас есть класс «контейнер-жидкость». это не требуется, и, если его удалить, он занимает полную ширину. Я удалил некоторые части, которые заставляют все работать, как вам нравится. Посмотрите мою скрипку выше. – AngularJR

-1

enter image description here

Я изменил код в Chrome отладчик Вам нужно удалить этот Col-хз-12. потому что он имеет прописку слева и справа в виде 15 px.

На самом деле

Для Container жидкости она набивка влево/вправо, как 15px. Для строки он имеет отступы влево/вправо как -15px. Итак, нет смысла иметь Col-md-12 в DIV.

Надеюсь, что это поможет решить вашу проблему.

источник

2015-05-12 05:19:29 Govind

Bootstrap Контейнер Жидкость не 100%

ответ

Смежные вопросы