Как сделать так, чтобы содержимое касалось края окна просмотра в Bootstrap

У меня возникли проблемы с тем, чтобы контент касался края браузера с помощью Twitter Bootstrap.

Я разрабатываю веб-сайт, который имеет полную ширину и где есть изображения, которые касаются краев видовых экранов. Я использовал .container-fluid div для моих .row и col- divs.

То, что я пробовал до сих пор:

  1. я пытался удалить отступ из .container-fluid, но, к сожалению, это приводит к появлению горизонтальной полосы прокрутки в браузере;
  2. я прикрепил пользовательский класс, который удалил заполнение из отдельных col-'s, но это не кажется правильным, чтобы играть с основной загрузочной системой сетки для достижения такого простого эффекта. Более того, цель состоит не в том, чтобы удалить все желоба, а в первом и последнем col- в row (левый и правый желоб соответственно)
  3. я ввел отрицательные поля для различных элементов на моем сайте, так что они съедают заполнение с обеих сторон браузера, от которого я хочу избавиться - это, однако, делает горизонтальную полосу прокрутки, тоже.

Я прошерстил сеть, чтобы найти решение этой проблемы, но, к сожалению, не было предложено четкого ответа.

Короче говоря:

Что вы делаете, чтобы контент касался краев видового экрана при разработке с Bootstrap?

2 2
twitter-bootstrap

2 ответа:

Вы не изменяете базовый css, вы создаете классы и используете их по мере необходимости. Я предпочитаю сделать Ан .внутренний элемент для моих колонн, если у меня есть желоб в середине, но не на внешних краях. И у вас есть use overflow-x: hidden.

Демо: http://jsbin.com/lujedi/1/

http://jsbin.com/lujedi/1/edit?html, css, вывод

Введите описание изображения здесь

HTML: 

         <div class="container-fluid full-width">
            <div class="row row-no-gutter">
               <div class="col-xs-6 col-sm-3">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />    
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />    
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />    
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" /> 
               </div>
               <!-- close .col -->
            </div>
         </div>
         <!-- close .container-fluid full-width -->

  <hr>

         <div class="container-fluid full-width has-inner">
            <div class="row row-no-gutter">
               <div class="col-xs-6 col-sm-3">
                 <div class="inner">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />
                 </div>
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                 <div class="inner">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />
                 </div>
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                 <div class="inner">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />
                 </div>
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                 <div class="inner">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />
                 </div>
               </div>
               <!-- close .col -->
            </div>
         </div>
         <!-- close .container-fluid full-width -->

CSS 

.container-fluid.full-width {
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
}
.row.row-no-gutter {
    margin: 0
}
.row.row-no-gutter [class*="col-"] {
    padding: 0
}
.img-full-width {
    width: 100.5%;
    height: auto;
}
.has-inner .row.row-no-gutter {
    margin-left: -10px;
    margin-right: -10px;
}
.row.row-no-gutter .inner {
    padding-left: 10px;
    padding-right: 10px;
}
10

Спасибо за совет. Тем временем я тестировал код и пришел к этому решению - которое также делает трюк для моего:

.no-gutter [class*="col-"]:first-child  {
padding-left:0;
}

.no-gutter [class*="col-"]:last-child {
padding-right: 0;
}
0