2

我对引导网格系统有一个小问题。

解释我的问题有点困难，所以我添加了一张图片来证明我的问题。当我在第二行添加图片时会出现此问题（当第一行已满时）

图片

我怎样才能解决这个问题？

我的代码：

<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">应该代表一行，并且不会溢出到下一行。因此，标记中的问题是一行中有 15 列。

您可以通过关闭div 并在第 4 张图像（12 列 - 4 次）row-fluid之后打开一个新的来修复它。span3

于 2013-06-02T13:01:56.833 回答
1

Bootstrap 中的一行等于 12 列。您正在尝试在 12 列行中插入 15 列（5 个 div，每个跨越 3 列）。

这应该可以解决问题：

<!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 回答