2013-06-02 139 views
2

我有一个自举网格系统的小问题。Bootstrap网格系统的问题

解释我的问题有点困难,所以我添加了一张图片来证明我的问题。这个问题发生在我添加第二行的图片(当第一行是充满

Image

我怎样才能解决这个

我的代码:?

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

回答

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

谢谢!精彩:) – kanarifugl

3

退房http://twitter.github.io/bootstrap/scaffolding.html

基本上,Bootstrap的网格系统是基于12列的,每个<div class="row-fluid">应该表示发送一行而不溢出到下一行。所以你的标记问题是你一行有15列。

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