2013-12-01 4 views
0

Я пытаюсь создать свой первый сайт Bootstrap, и я наткнулся на свои первые проблемы. Моя структура сайта включает одну строку в заголовке, которая разделена на столбцы: одна для логотипа, а другая - для рекламного пространства.Установка двух изображений внутри двух столбцов бутстрапа

Внизу этой строки есть еще один столбец с одним столбцом, который представляет собой только какой-то контейнер, окрашенный в серый цвет.

На большом экране рекламное место выглядит красиво, но при изменении размера моего браузера это становится довольно странным ... Рекламное место идет под логотипом и под строка ниже.

Я не могу предоставить ссылку JSFiddle, так как я не знаю, как импортировать CSS Bootstrap, поэтому я покажу вам код здесь и некоторые из моих простых изображений веб-страницы.

HTML:http://pastebin.com/N62Ps5MT

МИНУС:http://pastebin.com/0F3nzZ33

Большой дисплей: Desktop sized webpage


Большой. Просто немного меньше: Just a little smaller
Средний дисплей: Even smaller
Малый дисплей:

Very Small view


Я бы очень признателен за помощь. Мне очень интересно узнать, как решить проблемы Bootstrap с помощью разных методов.

Спасибо.

+0

Я не могу подтвердить это поведение, см [JSFiddle] (http://jsfiddle.net/dxmaK/1/show). По крайней мере, с Firefox 20, реклама идет ниже логотипа и остается там, даже с очень маленьким дисплеем. Это не имеет никакого отношения к загрузке, возможно, это один из других CSS JS. –

ответ

1
  1. Вы гнездите свои ряды в col-lg-12, кажется, нет причин для этого. Я не ожидаю, что это вызовет ваши проблемы.
  2. xs-classes никогда не складываются, ваши объявления не реагируют (возможно, попробуйте добавить .img-resposnive). Ширина объявлений изображения может быть больше, то общая ширина Col-XS-7
  3. Вы должны применять отзывчивые сбросы столбцов, см: http://getbootstrap.com/css/#grid-responsive-resets
Смежные вопросы