Переопределение Отзывчивого Defaults Row в Bootstrap

Question

У меня есть структура, которая выглядит следующим образом:

<div class="row row-phone"> 
    <div class="span3 span3-phone"> 
    <div class="span3 span3-phone"> 
    <div class="span3 span3-phone"> 
    <div class="span3 span3-phone"> 
</div> 
<div class="row row-phone"> 
    <div class="span3 span3-phone"> 
    <div class="span3 span3-phone"> 
    <div class="span3 span3-phone"> 
    <div class="span3 span3-phone"> 
</div> 

span3-телефон CSS является отзывчивым класс, который делает дива занимает 32% их емкости, а не какой-либо span3 обычно занимает. CSS прост:

.span-3-phone { 

    width: 32%; 
} 

Это регулирует их ширину. Проблема в том, что наличие класса row разбивает divs после 4-го div, тогда как я хочу 3 divs за строку. Есть ли способ переопределить функцию строки для мобильных устройств, чтобы она не сломала элементы? Не имея возможности сделать это, мне кажется, мне придется создать совершенно другой HTML-документ, чего я не хочу.

Answer 1

Вы можете преодолевать CSS с помощью !important. Есть время, когда его использование злоупотребляют и считаются ленивыми. Это хорошее решение, когда CSS нуждается в написании, и никакой другой вариант не является жизнеспособным. Хорошим примером может быть использование !important, когда плагин javascript генерирует встроенные CS, и вам нужно перезаписать его, и у вас нет возможности редактировать плагин. Если одно единственное использование !important помешает вам переписать весь ваш html, то я бы предложил его использовать.

.span-3-phone {  
    width: 32% !important; 
}