2014-09-20 3 views
0

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

enter image description here

Я пытаюсь вписаться в логотип HTML5 в последней строке, где я установить класс visible-xs-6col-xs-offset-3. По моему мнению, это должно создать три раздела, в которых первый раздел должен быть смещением из трех столбцов, которые отображаются в порядке, как вы можете видеть на изображении, но после этого я считаю, что логотип HTML5 должен находиться где-то в средней части и после этого еще 3 секции столбца. Разве это не логично? Но по какой-то причине второй раздел занимает всю строку после смещения. Что я делаю не так?

+4

Скриншот вашего кода на самом деле не поможет нам его отладить. Пожалуйста, разместите некоторый фактический код, желательно, чтобы мы могли воспроизвести проблему. –

+0

О, извините. Я просто понял, что скриншот не очень полезен на ПК. На Android-устройстве это было просто отлично. Я нашел решение своей проблемы. Спасибо, в любом случае! :) – Rohan

ответ

1

Я не считаю, что классы visible-xs-* используются для установки количества столбцов, только display:*. Возможны только block, inline и inline-block. Поэтому ваши классы должны быть ...

class="col-xs-6 col-xs-offset-3 visible-xs-block" 
+0

[Проверить это] (http://getbootstrap.com/css/#responsive-utilities) Я думаю, что они могут использоваться для ширины столбцов. Проверь это. – Rohan

+0

@Rohan Да, точно ... ты действительно это прочитал? Они предназначены только для свойств 'display:', а не для ширины столбцов. – Schmalzy

+0

О, я получаю это сейчас, * для приведенных ниже параметров. Я предположил, что * было для количества столбцов. Огромное спасибо. Теперь это имеет смысл. :) – Rohan

0

Я сделал глупую ошибку. Я забыл обернуть колонки в <div class="row">. И более того, я использовал классы .hidden-sm .hidden-md и .hidden-lg, чтобы быть уверенными.

И плюс я сделал еще одну глупую ошибку, предположив, что * в visible-xs-* означает количество столбцов вместо опций, заданных в гибких утилитах.

Если кто имеет подобную проблему, пожалуйста, обратите внимание на Bootstrap's responsive utilities

В любом случае спасибо всем, кто пытался помочь. Я приму это как ответ, чтобы закрыть вопрос.

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