1

私は見ましたが、特定の問題が見つかりませんでした。私はレスポンシブ Web ページを構築しようとしています。12 枚の画像の下にテキストがある lg レイアウト、テキストと写真が隣り合っている med と sm レイアウト、およびテキストの上に画像がある xs レイアウトが再びあります。

画像と段落を列に並べて配置できません。push-x、pull-x、offset-x、メディア クエリを試しました。ここでは、.img と .p ごとに div を作成し、それらをフロートにしました。

それを行う簡単な方法があると確信していますが、これは Bootstrap の最初の週であり、理解できません。これはどのように行われますか？

これが私のコードのサンプルです：

    <div class="row">
        <div class="content col-lg-2 col-md-4 col-sm-6 col-xs-12">
          <h2>Fork and Spoon</h2>
          <div class="frame1"><img class="img-responsive" src="./images/spork.jpg" alt="Spork"></div>
          <p>We are the <em>spork of the party!</em>  Yes, we've endured most every cutting remark; just don't refer to my wife as "flatware" and she is happy. </p>
          <p><a class="btn btn-default" href="#">More utensils here &raquo;</a></p>
        </div>
4

1 に答える 1

2

大きなグリッドの内側にグリッドを配置します。以下のコード、http://bootply.com/91851の実際の例

<div class="row">
  <div class="content col-lg-2 col-md-4 col-sm-6">
    <h2>Fork and Spoon</h2>
    <div class="row">
      <div class="col-lg-12 col-sm-6">
        <img class="img-responsivet" src="./images/spork.jpg" alt="Spork">
      </div>
      <div class="col-lg-12 col-sm-6">
        <p>We are the <em>spork of the party!</em>  Yes, we've endured most every cutting remark; just don't refer to my wife as "flatware" and she is happy. </p>
      </div>
    </div>
    <p><a class="btn btn-default" href="#">More utensils here »</a></p>
  </div>
  ...repeat...
</div><!--/row-->

.col-xs-12また、col-xs をまったく設定しない場合のデフォルトであるため、明示的に を設定する必要がないことにも注意してください。

于 2013-11-05T01:51:23.310 に答える