Центр содержимого строки Bootstrap, но оправдывает, когда столбец

Я хотел бы знать, есть ли способ в Bootstrap, чтобы содержимое элемента col-* в пределах row было выровнено влево или вправо, если оно расположено в виде столбцов, но для содержимое, которое должно быть выровнено центр, когда они расположены в виде рядов.Центр содержимого строки Bootstrap, но оправдывает, когда столбец

Например, возьмет эту простую строку:

<div class="row"> 
    <div class="col-sm-8"> 
     Lorem ipsum 
    </div> 
    <div class="col-sm-4"> 
     Lorem ipsum 
    </div> 
</div>

При отображении в виде столбцов, содержимое каждой DIV должно быть выровнено влево и выровнено вправо, соответственно. Но если рассматривать их как строки меньшего порта представления, они должны быть центрированы.

источник

2016-08-01 Jacob Stamm

Добавить класс в качестве выравнивания по умолчанию влево и использовать медиа-запросы, чтобы определить порт просмотра, чтобы выровнять его по центру. –

Вы можете использовать медиа-запросы следующим образом:

.text-center-xs { 
    text-align: center; 
}  
.text-left-xs { 
    text-align: left; 
}  
.text-right-xs { 
    text-align: right; 
} 


/* Small devices (tablets, 768px and up) */  
@media (min-width: 768px) { 
    .text-center-sm { 
     text-align: center; 
    } 
    .text-left-sm { 
     text-align: left; 
    } 
    .text-right-sm { 
     text-align: right; 
    } 
} 


/* Medium devices (desktops, 992px and up) */  
@media (min-width: 992px) { 
    .text-center-md { 
     text-align: center; 
    } 
    .text-left-md { 
     text-align: left; 
    } 
    .text-right-md { 
     text-align: right; 
    } 
} 


/* Large devices (large desktops, 1200px and up) */  
@media (min-width: 1200px) { 
    .text-center-lg { 
     text-align: center; 
    } 
    .text-left-lg { 
     text-align: left; 
    } 
    .text-right-lg { 
     text-align: right; 
    } 
}

Тогда:

<div class="row"> 
    <div class="col-sm-8 text-center-xs text-left-sm"> 
     Lorem ipsum 
    </div> 
    <div class="col-sm-4 text-center-xs text-right-sm"> 
     Lorem ipsum 
    </div> 
</div>

Demo: https://jsfiddle.net/iRbouh/5qkr7c5o/ (! Попытаться изменить размер вывода, чтобы увидеть результат)

Я надеюсь, что это Вам поможет.

источник

2016-08-01 03:10:40

Для того, чтобы получить эффект, указанный ниже, вам нужно отредактировать/изменить стандартные настройки начальной загрузки в файле начальной загрузки. (Мин.) .css.

<div class="row"> 
*centered text* 
<div class="col-sm-8"> 
    *left/right aligned text* 
</div> 
<div class="col-sm-4"> 
    *left/right aligned text* 
</div>

The .col- * части: Стандартные .col-XX-XX пункты все плавали оставленные самонастройки непосредственно.

Вы можете добавить .col - * {float: right;} в свой личный .css-файл. Но тогда вам нужно обеспечить, чтобы оператор include после списка bootstrap.css. (Лучший вариант)

Или вы можете напрямую отредактировать свой загрузочный файл (мин.) .css.

Или вы можете просто использовать грубую силу в вашем собственном файле .css, добавив «! Important», как показано.

Или вы можете нарушить все правила и просто поместить инструкцию style = "text-align: right! Important" в любой тег, который вы хотите. Но это ужасно.

from CSS Tricks

https://css-tricks.com/when-using-important-is-the-right-choice/

.row Часть:

Bootstrap не имеет ничего для выравнивания там для всего .row классов. Таким образом, ваши элементы .css намного легче вступят в силу.

Добавьте .row {text-align: center;} к вашему прилагаемому .css-файлу.

источник

2016-08-01 03:29:32

с использованием '! Important' не требуется, просто нужно добавить два класса для выравнивания влево и вправо, а затем центрировать их как внутри правила медиа-запросов, https: //jsfiddle.net/3tgyxs7k/1/ –

Честно, если вы просто учитесь Важным может быть то, что вы вытаскиваете, когда CSS имеет вас в последнем потоке, пытаясь понять, почему он не позволит вам изменить какое-то форматирование. –

Его следует использовать в качестве последнего средства, если у вас нет другого способа устранить проблему, кроме как если вы ее используете, из этого документа [MDN] (https://developer.mozilla.org/en-US/docs/Web/ CSS/Specificity # The_! Important_exception), ** rule # 1 ** говорит ** 'Всегда' ** 'искать способ использовать специфику, прежде чем даже подумать! Important', когда речь заходит о важном исключении! Так что, поскольку есть еще один способ исправить это, лучше избегать этого исключения. по крайней мере ИМХО –

Существует не готовое решение с использованием бутстрапа. У Bootstrap есть классы выравнивания, но они не предназначены для изменения по точкам останова таким же образом, как и их классы grid/column. Тем не менее, вы можете сделать это самостоятельно, используя медиа-запросы.

.custom-align-left, 
.custom-align-right { 
    text-align:center; 
} 

// this is when col-sm comes into play 
@media(min-width:768px){ 
.custom-align-left { 
    text-align:left; 
} 
.custom-align-right { 
    text-align:right; 
} 
} 

<div class="row"> 
    <div class="col-sm-8 custom-align-left"> 
     Lorem ipsum 
    </div> 
    <div class="col-sm-4 custom-align-right"> 
     Lorem ipsum 
    </div> 
</div>

источник

2016-08-01 03:43:17 partypete25

Центр содержимого строки Bootstrap, но оправдывает, когда столбец

ответ

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