1

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

问题 1 -ul添加一个padding-leftor 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>

图片 在此处输入图像描述

4

3 回答 3

3

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

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

于 2013-08-13T02:38:29.783 回答
0

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

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

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

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

.thumbnails{ margin-left:0; padding-left: 0;}
于 2013-08-12T19:51:27.497 回答
0

另外我建议你看看这个线程

似乎 Twitter Bootstrap 3 仍在构建中，我认为该col-lg-12课程仍然存在一些问题。不过我只是简单地看了一眼。

希望这可以帮助。

于 2013-08-12T20:02:41.953 回答