0

みんな！

現在、twitter ブートストラップ 3 を使用して Web サイトに取り組んでいますが、いくつかの問題があります。持っている 3 つのサムネイルを中央に配置しようとしています。テキストは中央に配置され、画像は中央に配置されますが、サムネイルを中央に配置できないようです。これが私のコードです：

       <div class="row">
     <div class="col-sm-6 col-md-3">
       <div class="thumbnail">    
  <img src="img/test.png">
        <div class="caption">
    <p>test</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
 <img src="img/test.png">
        <div class="caption">
          <p>test</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
  <img src="img/test.png>
        <div class="caption">
          <p>test</p>
        </div>
      </div>
    </div>

CSS:

    .thumbnail {
    background-color: #cecece;
    border: 1px solid #666;
    text-align:center;
}
4

1 に答える 1

2

  1. コンテンツをページの中央に配置するには、行をコンテナ () で囲みます

  2. Bootstrap は 12 列のグリッドを使用することに注意してください。中 (md) グリッドのツリー サムで行を埋めるには、列にcol-md-4クラス (3 x 4 = 12) クラスを使用することを検討してください。小さい (sm) グリッドでは、col-sm-6クラスの 3 倍を使用して 50% の 3 つの列ができました。1 つのクラスのみを使用することを検討してください。このクラスのみcol-md-4が 992 ピクセル以上の画面幅に対して 3 列を提供し、col-sm-4クラスのみが同じことを行いますが、768 ピクセル以上の画面幅に対してのみです。992 または 768 の下では、列が積み上げられます。

  3. text-centerクラスを適用することで、テキストを中央に配置できます。http://getbootstrap.com/css/#type-alignmentも参照してください。

参照: http://www.bootply.com/WAFUzlJs8s

于 2014-09-06T21:26:18.070 に答える