Предотвращение взрыва колонн флюидов в новую линию на экране iPhone

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

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4">
      <img src="/img/logo.png" width="120" />
    </div>
    <div class="span8">
      <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-map-marker"></i> Find Location</a><br />
      <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-comment"></i> Call Now</a>    
    </div>
  </div>
</div>

Он работает, как ожидалось, на рабочем столе, но я на iPhone столбец span8 разбивается и появляется на следующей строке. Есть ли способ переопределить это?

Ответ 1

Это ожидаемое поведение чувствительной сетки, вы можете увидеть тот же эффект, что и на странице документации по загрузке (особенно в демонстрации scaffolding), когда вы измените размер экрана. Вы можете преодолеть это, создав свой собственный класс для включения внутри тегов span, которые вы хотите поддерживать рядом на мобильном устройстве, и мы можем завершить его, включив его в медиа-запрос, который должен запускаться на мобильном устройстве с помощью размер экрана 480 пикселей или ниже (ака, iphone), таким образом, он не будет влиять на настраиваемую сетку рабочего стола, пока не достигнет этого ограничения.

CSS

@media all and (max-width: 480px)  {
    .half {
        float: left !important;
        width: 50% !important;
    }
}

Демо, попробуйте просмотреть эту демонстрацию на своем мобильном устройстве, http://jsfiddle.net/r5VCy/1/show/.

Ответ 2

В Bootstrap 3 существует новый набор классов CSS для строительных лесов, и они включают в себя функции, позволяющие отключить укладку на меньших экранах.

В новой номенклатуре CSS используются "столбцы", а не "промежутки", и они представлены в нескольких вариантах. Сорт col-xs- (extra small) позволяет настроить сетку, которая не складывается даже на дополнительных небольших устройствах.

Ответ 3

Просто хочу добавить к заметке в Bootstrap 3. У меня была та же проблема с рангом столбцов, что слишком рано и не хватало их ширины ( "col-lg-6" на пример "шаблон стартера" ). Сменив его на "col-sm-6", трюк - ссылка для каждого размера здесь:

http://getbootstrap.com/css/#responsive-utilities