Question

我是Bootstrap的新手，我正在尝试使用它来创建一个简单的网站。我想使用缩略图来创建一个包含3列的图库。这是我的代码：

<div class="container-fluid">
  <div class="row-fluid">
    <header class="span12 hero-unit">
      <img src="http://placehold.it/200x100" alt="The Art Conference" class="pull-right">
      <h1>The Art Conference</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p><a href="#" class="btn btn-primary btn-large">Learn more</a></p>
    </header>
  </div>

  <div clas="row-fluid">
    <ul class="thumbnails">
      <li class="span4">
        <article class="thumbnail">
          <img src="http://placehold.it/200x100">
          <h3>Jennifer Jerome</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam faucibus nibh justo, ac sollicitudin dolor aliquam sit amet. Pellentesque facilisis mollis rutrum. Sed ac lectus vestibulum, lacinia justo sed, porta sapien. In euismod pulvinar condimentum. Mauris eget laoreet ante. Phasellus ultrices libero eget magna egestas, sit amet laoreet quam gravida. Duis posuere eu libero ac feugiat.</p>
        </article>
      </li>
      <li class="span4">
        <article class="thumbnail">
          <img src="http://placehold.it/200x100">
          <h3>Jonathan Ferrar</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam faucibus nibh justo, ac sollicitudin dolor aliquam sit amet. Pellentesque facilisis mollis rutrum. Sed ac lectus vestibulum, lacinia justo sed, porta sapien. In euismod pulvinar condimentum. Mauris eget laoreet ante. Phasellus ultrices libero eget magna egestas, sit amet laoreet quam gravida. Duis posuere eu libero ac feugiat.</p>
        </article>
      </li>

      <li class="span4">
        <article class="thumbnail">
          <img src="http://placehold.it/200x100">
          <h3>Levonne Larue</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam faucibus nibh justo, ac sollicitudin dolor aliquam sit amet. Pellentesque facilisis mollis rutrum. Sed ac lectus vestibulum, lacinia justo sed, porta sapien. In euismod pulvinar condimentum. Mauris eget laoreet ante. Phasellus ultrices libero eget magna egestas, sit amet laoreet quam gravida. Duis posuere eu libero ac feugiat.</p>
        </article>
      </li>
    </ul>	
  </div>

在Chrome等浏览器上呈现时，它未对齐。图片：http://img835.imageshack.us/img835/6195/bootstrapproblem1.jpg

我错过了什么吗？。

P / s：我使用Bootstrap v2.3.2

Answer 1

你的代码中有一个拼写错误。尝试将<div clas="row-fluid">更改为<div class="row-fluid">。

Bootstrap缩略图不能正常工作

1 个答案: