6

ブートストラップでは、次のように、2 つのテキスト (ラベルAと一部のコンテンツB ) を互いに近づけてグループ化するデザインを実現しようとしています。

A (right-aligned) | B (left-aligned)

ブートストラップでレスポンシブ レイアウトを使用すると、グリッドが狭いウィンドウに積み上げられるまでは見栄えがします。次に、次のようになります。

                       |      A (right-aligned)
B (left-aligned)       |

...そして、この 2 つはもはや関係がないように見えます。

一度積み重ねると、要素は両方とも中央に配置されるか、両方とも左揃えになることをお勧めします。

.visible-* および .hidden-* クラスを使用してこれを修正できることはわかっていますが、それはハックのように感じます。グリッドのブートストラップ スタック部分に応じてテキストの配置を変更する簡単な方法はありますか?

4

2 に答える 2

1

右揃え (デフォルトは左揃え) には、スパンで text-align:right を使用できます。これをレスポンシブにするには、メディア クエリを使用して大画面にのみ適用します。

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

html:

<div class="container">
<div class="row">
<div class="span6 text-right-responsive">A (right-aligned)</div>
<div class="span6 text-left-responsive">B (left-aligned)</div>
</div> 
</div>

参照: https://stackoverflow.com/a/14809431/1596547バージョン 2.3 以降 Twitter の Bootstrap にも text-* クラスがあります。したがって、次を使用できます<div class="span6 text-right">A (right-aligned)</div>。また、このクラスはレスポンシブではありません。text-right は、要素のスタイルに text-align:right を追加するだけです。したがって、これもリセットするにはメディアクエリが必要です。小さな画面のテキストの配置をリセットします。

 @media (max-width:767px)
 {
    .text-right {text-align:left;}
    .text-left {text-align:left;}
 }

pull-right / pull-left クラスは要素に float を追加します。したがって、それらを使用するには、追加のラッパーが必要になります。

<div class="container">
<div class="row">
  <div class="span6"><span class="pull-right">A (right-aligned)</span></div>
  <div class="span6"><span class="pull-left">B (left-aligned)</span></div>
</div> 
</div>

この場合、メディアクエリも使用できます。ここで、小さな画面のフロートをリセットする必要があります。

@media (max-width:767px)
{
  .pull-right {float:none;}
  .pull-left {float:none;}
}

デモ: http://bootply.com/66024

于 2013-06-29T12:03:23.153 に答える