Изменять текст-выравнивание в ответ (с помощью Bootstrap 3)?

Я использую Bootstrap 3 для блога. В моем пользовательском CSS я недавно добавил

body {
    text-align: justify;
    ...
}

Мне нравится результат на больших экранах (планшет, рабочий стол). Но на небольших экранах (телефон), оправданный текст не работает очень из-за более узких столбцов плюс мой случайный случай использования блога long-ish-technical-terms-like-this.

Можно ли оперативно иметь text-align: justify только на больших экранах?

Возможно ли это сделать только с помощью CSS, или мне нужно будет написать некоторые пользовательские JS для этого?

Ответ 1

Да, как это (где ваша точка останова установлена на 48 м):

body{
    text-align: left;
}
@media screen and (min-width: 48em){
    body{
        text-align: justify;
    }
}

Второе правило будет отменять первое, если ширина области просмотра больше 48 м.

Ответ 2

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

.text-justify-xs {
    text-align: justify;
}

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

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

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

Затем вы можете добавить эти классы к своим элементам html:

<body class="text-justify-lg">

Вы также можете создавать правила CSS для text-left-xx и text-right-xx.

Ответ 3

Для более полного решения попробуйте следующее:

/*
 * Responsive text aligning
 * http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
 */
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (min-width: @screen-sm-min) {
  .text-sm-left { text-align: left; }
  .text-sm-right { text-align: right; }
  .text-sm-center { text-align: center; }
  .text-sm-justify { text-align: justify; }
}

@media (min-width: @screen-md-min) {
  .text-md-left { text-align: left; }
  .text-md-right { text-align: right; }
  .text-md-center { text-align: center; }
  .text-md-justify { text-align: justify; }
}

@media (min-width: @screen-lg-min) {
  .text-lg-left { text-align: left; }
  .text-lg-right { text-align: right; }
  .text-lg-center { text-align: center; }
  .text-lg-justify { text-align: justify; }
}

Ответ 4

Live Demo

Просто измените размер окна, и вы увидите, как он переключится на text-align:left;, если размер окна меньше 400px.

<style>
   @media screen and (min-width: 400px) {
      .text1 {
         text-align: justify;
      }
   }

   p {
      text-align: left;
   }
</style>

<p class="text1">vlédmjd fsdi dlin dsilncds ids nic dsil dsinc dlicidn lcdsn cildcndsli c dsilcdn isa slia sanil sali as as nds nds lcdsicd insd id nid ndi cas sal sa insalic lic sail il dnsailcn lic il eilwnvrur vnrei svfd nvfn vk in f,vn y,h ky,vnkivn iesnvfilsdnhvidsnvdslin dlindilc  ilc lisn asiln sliac lasnl ciasnc in li nsailcn salin ilanclis cliasnc lincls iandlisan dlias casilcn alincalis cli ad lias naslicn aslinc dliasnc slince ineali dliasnc liaslci nasdlicn laincilancfrelvnln dsil cndlic ndlicna linasdlic nsalinc lias</p>

Ответ 5

Мне нравятся как ответы Alberdigital, так и Fred K - бывший предоставляет действительный код CSS, который вы можете использовать в своих таблицах стилей, последний более тщательный.

Здесь лучшее из обоих миров.

/*
 * Responsive text aligning
 * http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
 *
 * EDITED by Nino Škopac for StackOverflow (https://stackoverflow.com/q/18602121/1325575)
 */
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (min-width: 768px) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }
}

@media (min-width: 992px) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (min-width: 1200px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}

Ответ 6

В моем случае я не люблю использовать медиа-запросы. Поэтому иногда я повторяю контент двумя способами. Один пользовательский выровненный, а другой по умолчанию - выровненный. Некоторый код:

<div class="col-md-6 visible-xs hidden-sm hidden-md hidden-lg">
    <%-- Some content here --%>
</div>
 <div class="col-md-6 text-right hidden-xs">
    <%-- Same content here --%>
</div>

Извинения за мой плохой английский;)

Ответ 7

Это работает для меня, попробуйте следующее:

text-align: -webkit-center;

Ответ 8

Все классы "text-align" предоставляются в Bootstrap: просто используйте align-lg-left, align-xs-center и т.д.