0

レスポンシブ デザインを使用してヘッダーを再編成する方法を考えています。

これが私のコードです：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">NAME</div>
    <div class="span6">123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789</div>
    <div class="span3">AVATAR</div>
  </div>
</div>

水平モード (左側に名前、中央に長いメッセージ、同じ行の右側に私のアバター) で必要なように見えます。しかし、垂直モードでは、私は 3 つの行を持っています。この編成の方が非常に良いでしょう:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">NAME</div>
    <div class="span6">AVATAR</div>
  </div>
  <div class="row-fluid">
    <div class="span12">123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789</div>
  </div>
</div>

を含む私のdivは垂直モードで同じ行NAMEにAVATAR収まるので。

アプリでこのような状況がたくさんあります。この場合のベスト プラクティスは何ですか? 私が見る唯一のことは、JQueryでdivの順序を変更することですが、もっと良いものがあると思います...?

ありがとう ！

4

0 に答える 0