如何在缩略图之间添加 space 而最后一个缩略图不会转到下一行？

Question

我有一个使用 bootstrap 的基本缩略图显示。我想连续显示 3 张图像，并在缩小页面时减少到 2 张图像。我已经解决了这个问题，直到我添加了一个 margin-right 以在缩略图之间添加一些 space 。一旦我这样做了，它就会把第三张图片推到下一行。我试着调整填充和边距，但我无法让第三个缩略图保持在同一条线上。我也尝试将其更改为 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

如果这就是你的意思，我不是 100%，但就是这样：

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

在第 ul 元素上使用 class .list-inline 并为其设置以下 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 里面，而不是合并。如果您需要在列表中使用它，也可以将其更改为该列表 > 请参阅 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>

如何在缩略图之间添加 space 而最后一个缩略图不会转到下一行？

How do I add space between thumbnails without the last thumbnail going to the next line?

html

css

twitter-bootstrap

thumbnails

spacing