страница не соответствует ширине экрана (twitter bootsrap)

Мне не удается настроить мою веб-страницу на точную ширину экрана, используя систему сетки бутстрапов. Прямо сейчас, я вижу горизонтальную полосу прокрутки, которая появляется, но я думал, что она должна соответствовать ширине моего экрана! Что я делаю неправильно?страница не соответствует ширине экрана (twitter bootsrap)

Вот мой код:

@gridColumns: 24; 
@fluidGridColumnWidth: 3.2%; 
@fluidGridGutterWidth: 1.0086956%; 

<body> 
    <div class='row-fluid'> 
     <div id='leftbar' class='span3'> 
     </div> 
     <div id='content-wrapper' class='span17'> 
      <div class='row-fluid'> 
       <div id='header' class='span24'> 
        <div class='row-fluid'> 
         <div class='span8 header'> 
         </div> 
         <div class='span8 header'> 
         </div> 
         <div class='span8 header'> 
         </div> 
        </div> 
       </div> 
       <div id='flash-message' class='span24 center'> 
       </div> 
       <div id = 'content' class='span24'> 
        <div class='row-fluid'> 
         <div id = 'content-left' class='span10 center'> 
         </div> 
         <div id = 'content-right' class='span14 center'> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id='rightbar' class='span4'> 
     </div> 
     <div id = 'footer' class='span24'> 
     </div> 
    </div> 
</body>

источник

2012-07-03 François Koessler

Вы пробовали, содержащий код в классе «контейнер»? От Bootstrap's docs:.

А также, по крайней мере, в вашем примере кода, ваши строки не соответствуют правильному количеству пролетов. Самая верхняя строка имеет следующие интервалы: 3 + 17 + 4 + 24 (нижний колонтитул) = 48. Такая же проблема повторяется во внутренних строках.

Чтобы исправить это, просто объявите новую строку для каждого набора из 24 (или меньше) пролетов.

источник

2012-07-03 10:33:31

Я следил за вашими рекомендациями, добавил контейнер класса контейнеров и объявил новый ряд жидкости для каждого набора из 24 пролетов. У меня больше нет полосы прокрутки, и поведение моих элементов имеет больше смысла, но у меня есть место слева и справа от экрана. Класс контейнера-жидкости добавляет некоторые дополнения слева и справа? В идеале, я бы хотел, чтобы мой правый бар придерживался крайнего правого угла экрана, возможно ли это? –

@Marronsuisse Чтобы сделать это, я думаю, вам, возможно, придется настраивать CSS класса контейнера-жидкости. В качестве альтернативы, вы можете объявлять цвета фона для тела таким образом, чтобы они соответствовали вашим левым и правым элементам, а затем полностью пытались без содержимого контейнера-жидкости? Однако, если ваш первоначальный вопрос был решен, пожалуйста, отметьте это как принятый ответ. –

Я удалил padding-right и padding-left из класса контейнер-жидкость в layouts.less. Там меньше места справа, но все же что-то вроде нескольких пикселей, я не могу найти, что вызывает его. У меня есть изображения справа от экрана, поэтому использование цвета фона не будет работать. –

страница не соответствует ширине экрана (twitter bootsrap)

ответ

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