html - Bootstrap 行未与容器的右侧对齐

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

您在 img 标签中缺少 .container 和 .img-responsive，此外您还可以拥有 .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>