Question

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

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

）会发生此问题

我该如何解决这个问题？

我的代码：

<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>

Answer 1

结帐http://twitter.github.io/bootstrap/scaffolding.html。

基本上，Bootstrap的网格系统基于12列。每个<div class="row-fluid">应代表一行，而不是溢出到下一行。因此，标记中的问题是您在一行中有15列。

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

Answer 2

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>

Bootstrap网格系统的问题

2 个答案: