Bootstrap Jumbotron не становится полной шириной тела

Привет я пытаюсь исправить мой Jumbotron, чтобы быть полной шириной экрана, но как-то это нужно 15px padding-left, padding-right. Если я удалю заполнение, появится горизонтальная полоса прокрутки с 30px right margin. Я использую по умолчанию Bootstrap ver 3.0.3 и макет VS2013 по умолчанию. Согласно этому ссылке Я убрал Jumbotron снаружи все .container моя страница выглядит sth как это

<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</body>

/////////////////////////////////////////////////

body {
padding-top: 50px;
padding-bottom: 20px;
/*background:url("../Images/ps_neutral.png") repeat;*/
}

/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.just {
text-align: justify;
}
.specialjum {
background: url('http://fc00.deviantart.net/fs70/i/2013/339/7/1/princess_kenny_korosu_by_theshadowstone-d6wu2zo.png') center;
color:#fff;
background-size: cover; 
}

Edit: браузер Firefox+ Результаты Chrome + IE10 ===|================|===

любые идеи о том, как исправить макет? Я не касался загрузочного CSS, который я обновил с помощью Nuget.

8
css html twitter-bootstrap twitter-bootstrap-3

6 ответов

просто поделиться своим опытом после создания веб-приложения MVC в Visual Studio 2013 я не мог заставить jumbotron растянуть ширину экрана независимо от того, что я сделал. В конечном итоге я обнаружил, что он блокируется тегом body-content контейнера по умолчанию **в Views/Shared/_Layout.страница cshtml по. После удаления тега, он отображается правильно. Надеюсь, это поможет любому, кто окажется в подобной ситуации.

Code

Before

After

5

Привет, ребята, решение было простым, вот как я div это

    <body>
    <div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
    <div> <===================this Div wrapping jumbotron
    <div class="jumbotron specialjum">
    <div class="over container body-content">
    ....page headers and other stuff
    </div>
    </div>
    <p class="just container body-content">
    ... body text
    </p>
    </div>
    </body>

никаких изменений в любой части CSS. Не знаю, почему это работает, но это просто работает.

3

если вы просто пытаетесь удалить обивку, то вы захотите положить padding:0; в своем .specialjum и убедитесь,что пользовательская таблица стилей вызывается после начальной загрузки. В противном случае добавьте padding:0!important; если его нужно вызвать раньше. Также повторите это для margin-right: и добавить в width:100%; если он не растягивается до ширины страницы, которая, я считаю, уже должна.

посмотреть этой jsFiddle

2

для всех, кто может оказаться здесь, у меня есть альтернативное решение. Я столкнулся с этой проблемой, но я просто не мог оторвать экране вне контейнера. То, что я сделал, просто завернуто в <div class="row"></div>. Я все еще изучаю bootstrap, поэтому я не знаю, вызовет ли это какие-либо проблемы в будущем, но пока это работает довольно хорошо.

1

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

1

изменить ширину .container до 100%:

container { width: 100% }
0