24

サイドバーが左側にあるレイアウトがあります。これは、デスクトップ ブラウザーでは問題になりません。ただし、モバイル用にサイズ変更すると、サイドバーがメイン列の上に表示されます。

この問題は、http://bootply.com/89871に示されています。

それらを交換する方法を知っている人はいますか？可能であれば、CSS ソリューションを希望します。

4

2 に答える 2

31

これを行うより良い方法があるかもしれませんが、ここに私がすることを示します：

<div class="container"> 
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side hidden-sm">
        Left (Side) - Move content to Partial View
      </div>
      <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 main">
        Right (Main) - Should be first when Mobile 
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side visible-sm">
        Bottom - Load content from Partial VIew
       </div>
    </div>    
</div>

私がしたこと：

  1. hidden-smクラスを追加visible-smして、最初の div を非表示にし、モバイル デバイスの場合に 3 番目の div を表示します。必要に応じて、タブレットに合わせてクラスを変更することもできます。
  2. 左側のバーのコンテンツを部分ビューに移動し、その部分を両方の div にロードすることをお勧めします。これにより、コンテンツが重複することはありません。

アップデート

この方法はより良いです：

<div class="container clearfix"> 
    <div class="row">
      <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 main pull-right">
        Right (Main) - Should be first when Mobile 
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side pull-left">
        Left (Side) - Move content to Partial View
      </div>
    </div>    
</div>

私がしたこと：

  1. フローティング div であるため、追加clearfixしますcontainer div
  2. マークアップで適切なコンテンツを最初に作成する
  3. と を追加pull-rightしpull-leftて、コンテンツを本来あるべき場所にフロートさせます
于 2013-10-24T15:18:48.410 に答える