Question

您好我正在尝试使用Bootstrap 3在此 DEMO 创建简单的滑块以在页面上显示最新产品。我在一个gallery div中有6个缩略图，我想在前视图中只显示其中的4个，然后向左滑动以查看另外两个。我用过bootstrap

<ul class="list-inline">
  <li>...</li>
</ul>

要呈现我display: inline-block;的{{1}}列表，但我不知道为什么它们不适合一行，最后两个项目显示在图库框的底部。 BESIDES第一个<li>看起来更高（即使我只有4 <li>）。现在我的问题是：

1 - 为什么第一项看起来比其余项高？
2 - 为什么项目不显示在一行中？
3 - 最后为什么<li>中的overflow: hidden;属性无法正常运行？这是我的代码：

.gallery

Answer 1

使用Firebug，我发现这里的问题是由于以下规则：

.list-inline > li:first-child {
    padding-left: 0;
}

所有.list-inline > li元素都有一个padding-left:5px规则，期望第一个孩子。由于第一个子节点中缺少填充，img内部的宽度增加了5px（因为max-width:100%;规则）。

如果您设置img的宽度（以像素为单位），则不会出现此问题。

关于（2）问题，引导网格系统要求在一行中col-sm-*的数字总和为12.您需要从col-sm-3更改为col-sm-2到将所有6个项目放在一行中。

关于（3）问题，我不确定你期待看到的是什么。

编辑2 ：有关CSS修复的信息，请参阅此链接http://bootply.com/111878

.gallery {
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    position: relative;
    max-height:310px;
}
.list-inline img.img-responsive {
    height: 233px;
    width: 233px;
}

关于在bootstrap 3中订购缩略图的问题

1 个答案: