Question

以下是我的jsFiddle完整代码示例。

我无法弄清楚如何上传我的placeholder.png图像。不过，请注意副标题下有（应该是）6张图像吗？

当我在本地运行（我的浏览器实际上可以解析placeholder.png）时，图像都会被一起刷新。我可以通过强行添加 来强迫它们分开，但这似乎是完成填充的错误方法：

<div class="row">
    <div class="col-md-2 text-center">
        <img src="placeholder.png"/>
        &nbsp;&nbsp;&nbsp;
        <img src="placeholder.png"/>
        &nbsp;&nbsp;&nbsp;
        <img src="placeholder.png"/>
        &nbsp;&nbsp;&nbsp;
        <img src="placeholder.png"/>
        &nbsp;&nbsp;&nbsp;
        <img src="placeholder.png"/>
        &nbsp;&nbsp;&nbsp;
        <img src="placeholder.png"/>
    </div>
</div>

我有什么想法可以让这些被填充，以便所有6张图片都居中但仍占据页面宽度的大部分？

另外，只是将曲线球投入等式中，当它在生产中运行时，服务器决定发回多少图像。它永远不会是6个图像：它将始终介于3到7个图像之间（因此：3,4,5,6个7图像）。我需要这个足够聪明，使图像居中，并使它们占用大部分页面宽度，无论服务器返回多少图像。有什么想法吗？

Answer 1

你可以使用Bootstrap的list-inline ..

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 text-center">
      <h1 style="text-align: center;">
        <span class="glyphicon glyphicon-user secondary" style="display: block"></span>
        <span class="strong-primary">Who's using Fizz<b>Cloud</b>?</span>
      </h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 text-center">
      <ul class="list-inline">
        <li><img src="//placehold.it/100x100"></li>
        <li><img src="//placehold.it/100x100"></li>
        <li><img src="//placehold.it/100x100"></li>
        <li><img src="//placehold.it/100x100"></li>
        <li><img src="//placehold.it/100x100"></li>
        <li><img src="//placehold.it/100x100"></li>
      </ul>
    </div>
  </div>
</div>

演示：http://www.bootply.com/DSpNtxqsYJ

Answer 2

我不会为此使用Bootstrap行和列。我实际上会使用一个Bootstrap表（我可能会大吼大叫说）

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 text-center">
            <h1 style="text-align: center;">
                <span class="glyphicon glyphicon-user secondary" style="display: block"></span>
                <span class="strong-primary">Who's using Fizz<b>Cloud</b>?</span>
            </h1>
         </div>
    </div>
    <table class="table table-responsive">
        <tbody>
            <tr>
            <td class="text-center"><img src="//placehold.it/100x100" class="img-thumbnail"></td> 
            <td class="text-center"><img src="//placehold.it/100x100" class="img-thumbnail"></td>
            <td class="text-center"><img src="//placehold.it/100x100" class="img-thumbnail"></td>
            <td class="text-center"><img src="//placehold.it/100x100" class="img-thumbnail"></td>
            <td class="text-center"><img src="//placehold.it/100x100" class="img-thumbnail"></td>
            <td class="text-center"><img src="//placehold.it/100x100" class="img-thumbnail"></td>
            </tr>
        </tbody>
    </table>
</div>

视觉：http://www.bootply.com/dmrb3J8ihl

这也将解决有3-7张照片的问题; table-responsive类使表格适应浏览器的宽度。

希望有所帮助！

Answer 3

为了占据整个屏幕，您需要每张图片占用可用屏幕宽度的份额。没有jQuery，我无法真正看到这样做的方法。好消息是，相当简单的实施。

找到图像的数量。取可用的总宽度百分比并除以该数字。然后将其作为宽度应用于每个图像：

＆＃13;

var $images = $(".centerImages > img");
var numberImages = $images.length;
var width = 90/numberImages;
$images.css('width', width+'%');

＆＃13;

.centerImages {
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="centerImages">
  <img src="//placehold.it/100x100">
  <img src="//placehold.it/100x100">
  <img src="//placehold.it/100x100">
  <img src="//placehold.it/100x100">
  <img src="//placehold.it/100x100">
  <img src="//placehold.it/100x100">
</div>

＆＃13;

Bootstrap 3：如果列数未知，如何填充行中的列？

3 个答案: