2

ブートストラップ グリッド システムに小さな問題があります。

私の問題を説明するのは少し難しいので、私の問題を証明するために写真を追加しました。この問題は、2 行目に画像を追加すると発生します (1 行目がいっぱいの場合)。

画像

どうすればこれを修正できますか?

私のコード:

<div class="row-fluid">
    <div class="span3">
        <div class="portfolio-thumb">
            <img src="http://dribbble.s3.amazonaws.com/users/29591/screenshots/1095922/flat_icons_1x.png">
        </div>
    </div>
    <div class="span3">
        <div class="portfolio-thumb">
            <img src="http://dribbble.s3.amazonaws.com/users/24078/screenshots/1096340/whale.jpg">
        </div>
    </div>
    <div class="span3">
        <div class="portfolio-thumb">
            <img src="http://dribbble.s3.amazonaws.com/users/141038/screenshots/1095723/cfrej_1x.png">
        </div>
    </div>
    <div class="span3">
        <div class="portfolio-thumb">
            <img src="http://dribbble.s3.amazonaws.com/users/86429/screenshots/1095840/happywoodcutter_ipad_sounas_1x.jpg">
        </div>
    </div>
    <div class="span3">
        <div class="portfolio-thumb">
            <img src="http://dribbble.s3.amazonaws.com/users/86429/screenshots/1095840/happywoodcutter_ipad_sounas_1x.jpg">
        </div>
    </div>
</div>
4

2 に答える 2

3

http://twitter.github.io/bootstrap/scaffolding.htmlをチェックしてください。

基本的に、Bootstrap のグリッド システムは 12 列に基づいています。それぞれ<div class="row-fluid">が 1 つの行を表し、次の行にオーバーフローしないようにする必要があります。したがって、マークアップの問題は、1 行に 15 列あることです。

div を閉じてrow-fluid、4 番目の画像 (12 列 - 4 回span3) の後に新しいものを開くことで修正できます。

于 2013-06-02T13:01:56.833 に答える
1

Bootstrap の 1 行は 12 列に相当します。12 列の行に 15 列を挿入しようとしています (それぞれ 3 列にまたがる 5 つの div)。

これでうまくいくはずです：

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type ="text/css" href="bootstrap-responsive.min.css">
</head>
<body>
  <div class="row-fluid">
    <div class="portfolio-thumb span3">
     <img src="http://dribbble.s3.amazonaws.com/users/29591/screenshots/1095922/flat_icons_1x.png">
    </div>
    <div class="portfolio-thumb span3">
     <img src="http://dribbble.s3.amazonaws.com/users/24078/screenshots/1096340/whale.jpg">
    </div>
    <div class="portfolio-thumb span3">
     <img src="http://dribbble.s3.amazonaws.com/users/141038/screenshots/1095723/cfrej_1x.png">
    </div>
    <div class="portfolio-thumb span3">
     <img src="http://dribbble.s3.amazonaws.com/users/86429/screenshots/1095840/happywoodcutter_ipad_sounas_1x.jpg">
    </div>
    <div class="row-fluid">
    <div class="portfolio-thumb span3">
     <img src="http://dribbble.s3.amazonaws.com/users/86429/screenshots/1095840/happywoodcutter_ipad_sounas_1x.jpg">
    </div>
  </div>
  </body>
  </html>
于 2013-06-02T13:03:20.017 に答える