67

私はhtmlを次のように持っています:-

<footer>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 text-left">
            <p>
                &copy; 2015 example.com. All rights reserved.
            </p>
        </div>
        <div class="col-xs-12 col-sm-6 text-right">
            <p>
                <a href="#"><i class="fa fa-facebook"></i></a> 
                <a href="#"><i class="fa fa-twitter"></i></a> 
                <a href="#"><i class="fa fa-google-plus"></i></a>
            </p>
        </div>
    </div>
</div>
</footer>

コードから、列のテキストがそれぞれ左揃えと右揃えになっていることがわかります。ただし、 xs モードでは、それらを中央揃えにするのが好きです。Twitterブートストラップを使用してこれを行うにはどうすればよいですか?

4

9 に答える 9

76

Bootstrap V4 では、レスポンシブ テキスト配置が追加されました。

https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment

左、右、および中央揃えの場合、グリッド システムと同じビューポート幅のブレークポイントを使用するレスポンシブ クラスを使用できます。

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
于 2016-08-07T08:07:45.817 に答える
24

このためのブートストラップには何も組み込まれていませんが、いくつかの単純な css で修正できます。このようなものがうまくいくはずです。テストされていませんが

 @media (max-width: 768px) {
      .col-xs-12.text-right, .col-xs-12.text-left {
              text-align: center;
       } 
    }
于 2015-04-10T13:33:57.817 に答える
15 
@media (max-width: 767px) {
    footer .text-right, 
    footer .text-left {
        text-align: center;
    } 
}

@loddnの回答を更新し、2つの変更を加えました

  • max-widthブートストラップのxs画面数は 767px (768px はsm画面の開始位置)
  • (これは好みの問題です)列幅が変更された場合に CSS を更新する必要がないように、footer代わりに使用しました。col-*
于 2015-04-10T13:44:53.663 に答える
15

CSS 部分は次のとおりです。

CSS: 

@media (max-width: 767px) {

  // Align text to center.
  .text-xs-center {
    text-align: center;
  } 
}

HTML 部分は (このテキスト センターは 767px 幅以下でのみ機能します)

HTML:

 <div class="col-xs-12 col-sm-6 text-right text-xs-center">
        <p>
            <a href="#"><i class="fa fa-facebook"></i></a> 
            <a href="#"><i class="fa fa-twitter"></i></a> 
            <a href="#"><i class="fa fa-google-plus"></i></a>
        </p>
 </div>
于 2016-10-03T11:58:09.707 に答える