Bootstrap 3图库替换

Question

我正在使用Bootstrap 3 RC1，我无法正确设置图库。

问题1 - ul正在添加padding-left或margin-left。我需要覆盖什么来删除它？

问题2 - 每个li跨越容器，而不受其span4类的限制。我想每行有两张图片。

我在下方添加了一张图片，显示问题所在。

HTML

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div id="allVideos">
        <ul class="thumbnails">
          <li class="span4">
            <div class="thumbnail">
              <img src="<%= thumbnail_image %>">
              <div class="caption">
                <a data-attribute="<%= _id %>" class="delete">X</a>
                <h3><a class="video_item"><%= title %></h3></h3>
                </div>
              </div>  
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

图片

Answer 1

Bootstrap 2.3使用了“span”类（在您的示例中为span4），Bootstrap 3.0使用“col-X”类（在您的示例中为col-lg-X）。 “span”类不再存在。

问题1 - 使用list-unstyled类删除<li>个孩子的左/右边距。 http://getbootstrap.com/css/#type-lists

问题2 - 删除span类并使用Bootstrap 3的新类：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="container">
  <ul class="list-inline list-unstyled row">
    <li class="col-lg-4">
      <div class="thumbnail">
        <img src="http://placehold.it/350x150" alt="">
        <div class="caption">
          <a class="delete">X</a>
          <h3><a class="video_item">Howdy</a></h3>
        </div>
      </div>
    </li>
    <li class="col-lg-4">
      <div class="thumbnail">
        <img src="http://placehold.it/350x150" alt="">
        <div class="caption">
          <a class="delete">X</a>
          <h3><a class="video_item">Howdy</a></h3>
        </div>
      </div>
    </li>
    <li class="col-lg-4">
      <div class="thumbnail">
        <img src="http://placehold.it/350x150" alt="">
        <div class="caption">
          <a class="delete">X</a>
          <h3><a class="video_item">Howdy</a></h3>
        </div>
      </div>
    </li>
  </ul>
</div>

Answer 2

尝试将此添加到您的图片中以使其响应：

<img src="<%= thumbnail_image %>" class="img-responsive">

（参考：http://getbootstrap.com/css/#overview-responsive-images）

对于填充和边距，你可以添加自己的样式来覆盖吗？

.thumbnails{ margin-left:0; padding-left: 0;}

Answer 3

我还建议您查看this thread

似乎Twitter Bootstrap 3仍在建设中，我认为col-lg-12类仍然存在一些问题。我虽然只是简单地瞥了一眼。

希望这有帮助。