7

それぞれに 3 つの列を持つ 2 つの行があります。最初の行には画像が含まれ、2 番目の行にはテキストの領域が含まれます。3 つの列が水平に配置されているデスクトップ ブラウザーでは、各画像は対応するテキスト領域の上に配置されます。しかしもちろん、モバイル デバイスでは、すべての列が互いに下に積み上げられます。これにより、行 1 のすべての画像が互いの下に表示されます。その後、テキスト領域が同じように続きます。

列を再配置する css の方法はありますか? 次のように、画像とそれに対応するテキスト領域を一緒に積み重ねたいと思います。

image1
textArea1
image2
textArea2
image3
textArea3

私はjsfiddleをセットアップしています。

<div class="row">
<div class="span4"> <div class="span4"> <div class="span4">
<div class="row">
<div class="span4"> <div class="span4"> <div class="span4">

画像はありませんが、大まかなアイデアは得られます。

4

8 に答える 8

2

ブートストラップ 3.0 を使用していると仮定します。

これは非常に一般的なレイアウト状況です。いくつかのオプションがあります。

すべての列を同じコンテナーに配置し、さまざまなビューでそれに応じて処理する場合は、オフセットを使用して組み込みのブートストラップ列の並べ替えを使用できます。ただし、これは主にコンテンツが表示される順序を並べ替えることに関係しており、この特定のケースには最適ではありませんが、将来さまざまなシナリオで役立つようになるため、これがどのように機能するかを見てください.

ブートストラップ 3.0 オフセット

しかし、あなたの場合と私がこのような場合に広く使用する最も適切な解決策は、次のように画像とテキストを同じ列に配置することです。

<div class="row">
    <div class="col-md-3">
        <img class="img-responsive" src="..."/>
        <p>...image text here...</p>
    </div>
    <div class="col-md-3">
        <img class="img-responsive" src="..."/>
        <p>...image text here...</p>
    </div>
    <div class="col-md-3">
        <img class="img-responsive" src="..."/>
        <p>...image text here...</p>
    </div>
</div>

このようにして、すべてのビューで正しく表示される列ができます。

ブートストラップ 3 はモバイル ファーストであり、最小のビューから最大のビューまで、理想的に開発を開始する必要があることに注意してください。さまざまなサイズのレイアウトで望ましい動作が得られるように、関連する dom 要素を常にまとめるようにしてください。

画像がより大きな列スペースの幅と同じかそれよりも大きいこと、および画像が適切にスケーリングされるように、画像でimg-responsiveクラスを使用していることを確認する必要があります。

これを実現する方法は他にもありますが、それらはレスポンシブ レイアウトにブートストラップを使用する目的を無効にし、正当な理由もなく同様の結果でより複雑になります。

より良いメンテナンスのために、ブートストラップでマークアップをできるだけシンプルかつエレガントに保つようにしてください。

于 2014-12-19T17:00:38.527 に答える
0

結局、各画像と対応するテキストを同じ行と列に配置するだけでした。画像の下のテキスト。

于 2013-03-04T10:01:33.317 に答える
0

ブートストラップ 3x を使用していますか?

新しいグリッド システムでは、さまざまな画面サイズに対して独自のスパン サイズを設定できます。これにより、すべての行を希望どおりに並べることができます。

例：

<div class="col-lg-2 col-md-1 col-xs-1"></div>

http://getbootstrap.com/css/#gridをチェックしてください

于 2014-04-28T22:49:58.030 に答える
0

ここで例を見つけることができます：

http://fittopage.org/2012/09/11/vertical-reordering-in-css/

CSS3 にもディレクティブがありますが、私の知る限りまだ公開されていません。

更新: css3 では flexbox と呼ばれますが、現在、chrome のみがその機能の一部をサポートしています。詳細はこちら

于 2012-10-22T07:53:43.550 に答える
0

スパンに行を入れてみましたか?

お気に入り

<div class="row">
   <div class="span4">
       <div class="row">
          <div class="spanX">...</div>
       </div>
       <div class="row">
           <div class="spanX">...</div>
       </div>
   </div>
 <div>
于 2012-10-22T07:47:14.813 に答える
0

以下の画像と関連情報を表示するために行を使用する代わりに、http://twitter.github.com/bootstrap/components.htmlのような Twitter ブートストラップのサムネイルを使用でき ます。

    <ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
...
</ul>
于 2012-10-22T07:49:52.863 に答える