Bootstrap responsive - игнорировать 'spanX' при просмотре на мобильном телефоне

Question

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

<div class="row-fluid"> 
    <div class="span1 hidden-phone"> 
    <img src="path/to/image"> 
    </div> 

    <div class="span11"> 
    <p>Here is some text</p> 
    </div> 
</div> 

В этом примере span1 ДИВ скрыт, если сайт посещается с мобильного телефона, однако span11 ДИВ еще видна.

Если я использую этот код, содержимое span11 будет охватывать всю ширину страницы (учитывая, что оно просматривается на мобильном телефоне), или оно будет по-прежнему охватывать только 11 из 12 мест в Bootstrap сетка? Если это так, как я могу указать, что я хочу, чтобы абзац в span11 охватывал всю ширину страницы, а не только 11 из 12 пробелов, определяемых сеткой?

Answer 1

Он будет охватывать всю ширину.

css бутстраповского преобразует все элементы с классом span*, чтобы блокировать элементы с шириной 100% для устройств с экраном шириной менее 767px; следовательно, на мобильном телефоне нет «сетки».

Вот код, который делает это:

[class*="span"], 
.uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing 
.row-fluid [class*="span"] { 
    float: none; 
    display: block; 
    width: 100%; 
    margin-left: 0; 
    .box-sizing(border-box); 
    } 

Источник: The Bootstrap mobile layout .less file, line 60