Question

这让我疯狂，似乎解决方案是一个我忽略的简单解决方案。我有一排三张图片，我的理解是bootstrap负责内容的对齐。

不应该将第三张图像对齐到容器的右侧，而三个图像的间距是相等的吗？

http://codepen.io/amits/pen/oxbjmd?editors=1100

<div class="row">
<div class="col-md-4">
  <img src="">
</div>
<div class="col-md-4">
  <img src="">
</div>
<div class="col-md-4">
  <img src="">
</div>
</div>

我错过了什么？

Answer 1

您错过.container和.img-responsive img标记，此外，您可以为小型设备.col-sm-*和.col-xs-*用于额外的小型设备。

仅为演示添加.col-xs-4

查看Docs

.container {
  border: red solid
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-4 col-md-4">
      <img class="img-responsive" src="//lorempixel.com/1200/900">
    </div>
    <div class="col-xs-4 col-md-4">
      <img class="img-responsive" src="//lorempixel.com/1200/900">
    </div>
    <div class="col-xs-4 col-md-4">
      <img class="img-responsive" src="//lorempixel.com/1200/900">
    </div>
  </div>
</div>

Bootstrap行未对齐到容器的右侧

1 个答案: