1

モバイルレイアウトでも、テキストの横に画像の小さなサムネイルが必要な、私のウェブサイトのために以下の行に沿って何かを探しています:

a

ただし、モバイルでのデフォルトのブートストラップ動作は、すべての div を上下にフローすることです。img が全幅になり、その下にテキストが流れているように見えますが、これは望ましくありません。

望ましい結果を達成できるようにするブートストラップに組み込まれているものはありますか、それともカスタム CSS を使用する必要がありますか?

4

2 に答える 2

0

1000 回以上閲覧されているのを見て、1 年前の自分の質問に答えようと思いました。その後、回答済みとしてマークすることもできます。

モバイルから構築された Boostrap v3 には、モバイル デバイス用のクラス ".col-xs-*" があり、積み重ねるのではなく横に並べて配置するコンテンツを指定できます。

Bootstrap 3 なしで、または古いバージョンの Bootstrap 3 で動作している場合、これらのメディア クエリまたはスタイルを作成できます。 Bootstrap のドキュメントまたはコードを参照してください。

于 2014-12-12T17:55:13.917 に答える
0

ブートストラップ スタイルはグリッド システムに基づいているため、カスタム スタイルを記述する必要はありません。スパンクラスを使用して要件を達成できます

流動的なレイアウトを使用している場合は、次のようなものを使用できます

<div class="span6">
  <div class="span6">
     here your image code
   </div>
   <div class="span6">
     here your description
   </div>                  
  </div>
</div>

固定レイアウトを使用している場合

<div class="span6">
  <div class="span3">
     here your image code
   </div>
   <div class="span3">
     here your description
   </div>                  
  </div>
</div>

ページ幅に応じてスパンクラスを選択できます

アップデート：

このフィドルを確認してください：

http://jsfiddle.net/wLxen/3/

詳細についてはhttp://twitter.github.com/bootstrap/scaffolding.html#gridSystem

于 2013-04-04T05:29:13.547 に答える