Question

我使用bootstrap显示基本缩略图。我希望连续3张图像，并在缩小页面时下至2张图像。我已经解决了这个问题，直到我添加了一个margin-right来在缩略图之间添加一些空格。一旦我这样做，它将第三张图像推到下一行。我试着玩填充和边距，我只是不能让第三个缩略图保持在同一条线上。我也尝试将它改为col-sm-3，这似乎也没有用。

HTML：

<div class="work">
<ul>
<li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
<li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
<li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
</ul>
</div>

CSS：

.work {
padding: 0px 40px 0px 0px;
max-width: 100%;
}

.thumbnail {
margin-right: 10px;
}

Answer 1

如果这是你的意思，我不是百分之百，但在这里：

<强> HTML

<div class="work">
    <ul>
        <li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
        <li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
        <li class="thumbnail col-sm-4 col-xs-6"><a href="#honey" data-toggle="modal"><img src="thumbnails.png"/></a></li>
    </ul>
</div>

<强> CSS

.thumbnail {
    border:0;
}
.thumbnail a{
    display:block;
    padding:10px;
    background:red;
}
.thumbnail img{
    width:100%;
}

https://jsfiddle.net/ax7wcLo4/2

Answer 2

如果你真的想要分离li元素，你应该在没有bootstrap默认网格系统的情况下这样做。

<ul class="list-unstyled list-inline">

在.list-inline元素上使用类ul并为它们设置以下css;

ul {
    margin: 0;
    padding: 0;
    width: 100%
}
li {
    width: calc(100% - 10px);
    margin: 0 5px;
}

要注意：calc根据您的浏览器支持范围存在一些兼容性问题。 Can I Use Link for CALC

Answer 3

您应该将thumbnail放在column内，而不是合并。如果您在列表中需要它，那么也可以将其更改为＆gt;请参阅Default Bootstrap Example。

请参阅整页的工作代码段。

body,
html {
  padding-top: 50px;
}
.row.no-list-style {
  list-style: none;
  margin-left: -55px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h3>Default</h3>

  <div class="row">
    <div class="col-sm-4 col-xs-6">
      <div class="thumbnail">
        <a href="#honey">
          <img src="http://placehold.it/350x350/f00" />
        </a>

      </div>
    </div>
    <div class="col-sm-4 col-xs-6">
      <div class="thumbnail">
        <a href="#honey">
          <img src="http://placehold.it/350x350/000" />
        </a>

      </div>
    </div>
    <div class="col-sm-4 col-xs-6">
      <div class="thumbnail">
        <a href="#honey">
          <img src="http://placehold.it/350x350/f00" />
        </a>

      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h3>Inside a List</h3>

  <ul class="row no-list-style">
    <li class="col-sm-4 col-xs-6">
      <div class="thumbnail">
        <a href="#honey">
          <img src="http://placehold.it/350x350/ff0" />
        </a>

      </div>
    </li>
    <li class="col-sm-4 col-xs-6">
      <div class="thumbnail">
        <a href="#honey">
          <img src="http://placehold.it/350x350/000" />
        </a>

      </div>
    </li>
    <li class="col-sm-4 col-xs-6">
      <div class="thumbnail">
        <a href="#honey">
          <img src="http://placehold.it/350x350/ff0" />
        </a>

      </div>
    </li>
  </ul>
</div>

如何在缩略图之间添加空格而不使用最后一个缩略图进入下一行？

3 个答案: