69

ブログに Bootstrap 3 を使用しています。カスタム CSS で、最近追加した

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

大きな画面 (タブレット、デスクトップ) での結果が気に入っています。しかし、小さな画面 (電話) では、列が狭く、ブログでlong-ish-technical-terms-like-this.

レスポンシブに大きな画面text-align: justify でのみ使用できますか?

CSS を介してのみ行うことは可能ですか、それともカスタム JS を作成する必要がありますか?

4

9 に答える 9

122

提供されたソリューションは完全に正しいものですが、興味深い別のアプローチがあると思います。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">

text-left-xx と text-right-xx の CSS ルールを作成することもできます。

于 2014-12-03T08:41:16.870 に答える
79

より完全な解決策については、これを試してください：

/*
 * 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; }
}
于 2015-03-27T10:17:09.913 に答える
37

はい、このように (ブレークポイントが 48em に設定されている場合):

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

ビューポートの幅が 48em より大きい場合、2 番目のルールが最初のルールをオーバーライドします。

于 2013-09-03T22:01:05.920 に答える
6

ライブデモ

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>
于 2013-09-03T22:01:17.530 に答える
1

col-auto と mr-auto を試しましたか? 詳細情報:マージン ユーティリティ v4 で flexbox に移行すると、.mr-auto などのマージン ユーティリティを使用して、兄弟列を互いに離すことができます。

<div class="container">
  <div class="row">
     <div class="col-auto mr-auto">
        <p>Blah</p>
     </div>
     <div class="col-auto">
        <p>Blah</p> 
    </div>
  </div>
  </div>
于 2018-06-24T10:17:22.643 に答える
-6

すべての「text-align」クラスは Bootstrap で提供されています: 、 などを使用するだけalign-lg-leftですalign-xs-center...

于 2016-01-15T09:31:39.033 に答える