1

ブートストラップの中間ビューの 3 列

上の画像に示されているように、ブートストラップの中間ビューに3つの列があります。

ここに画像の説明を入力

このタイプのビューを小さなビューで実現したいのは col-sm-*

私のコードは

<div class="col-md-8">
  <div class="col-md-12">A</div>
  <div class="col-md-12">C</div>
</div>
<div class="col-md-4">
  <div class="col-md-12">B</div>
</div>

このようにして、中程度のビューで目標を達成できますが、小さなビューでは達成できません。画像に示すように、両方のビューと中と小さなビューの両方を達成するにはどうすればよいですか。

4

3 に答える 3

1

これもbootstrap css docを読むことをお勧めします

しかし、これを試してください：

<div class="row">
    <div class="all a col-sm-12 col-md-6">A</div>
    <div class="all b col-sm-12 col-md-6">B</div>
    <div class="clearfix"></div>
    <div class="all c col-sm-12 col-md-6">C</div>
</div>

高さの不一致<div class="clearfix"></div>を気にしない場合は、を削除できます

于 2015-10-05T19:14:35.750 に答える
0

まず第一に、行なしで列を割り当てるべきではないので、次のようにする必要があります:

<div class="row">
  <div class="col-md-8 col-xs-12">A</div>
  <div class="col-md-4 pull-right col-xs-12">B</div>
  <div class="col-md-8 col-xs-12">C</div>
</div>

したがって、B Div を右に引きます (したがって、次の div をクリアせず、間隔を空けます)。また、col-xs-12 を使用すると、float がモバイルに存在しないことが保証されます。

ペンはこちら

さて、自分のコードを使い続けたいのであれば、 Shanの回答が最適だと思います。

高さを B にして、マージンを調整して適切な位置に配置することもできますが、これはベスト プラクティスとは見なされず、バグが発生する可能性があります。

于 2015-10-05T20:48:22.023 に答える
0

少しストレッチですが、これを試すことができます：-

<div class="col-md-8">
  <div class="col-md-12">A</div>
  <div class="col-md-12 visible-sm visible-xs">B</div>
  <div class="col-md-12">C</div>
</div>
<div class="col-md-4 hidden-sm hidden-xs">
  <div class="col-md-12">B</div>
</div>

率直に言って、HTML と CSS だけを使用する他のソリューションは考えられません。ただし、スクリプトが含まれている場合は別のケースになります。

于 2015-10-05T20:16:14.107 に答える