it-swarm.com.ru

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

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

<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; 
}

Правка: Firefox + Chrome + IE10 результаты === | =============== | ===

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

10
Flood Gravemind

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

    <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. Не знаю, почему это работает, но это просто работает.

4
Flood Gravemind

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

 Code

 Before

 After

6
snapper

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

Смотрите это jsFiddle

2
jmalais

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

1
Peavey2787

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

1
Eldiyar Talantbek

Изменить ширину .container на 100%:

container { width: 100% }
0
Mohammed Raja