如何使图片库与 twitter bootstrap 一起使用？

Question

我正在尝试在我的索引页面上使用图片库。但是很难得到期望的行为。这是我的代码：

.container
  .row
    .col-md-8.col-sm-8.col-xs-8
      - 4.times do |i|
        .col-md-1.col-sm-1.col-xs-1
          %img.img-responsive.img-rounded{:alt => "", :src => "http://placehold.it/300"}
    .col-md-4 //consider simple code in for this column !

我在添加容器、行等之前尝试过，但图像总是变小。我的代码有问题吗？我是否在引导行为方面犯了一些错误？

Answer 1

我是新手，希望这是一个可以帮助你的答案：

我不知道你为什么要这样填。

容器的宽度（在 Bootstrap 计数中）为 12。因此您可以放入 12 个元素，其类为 col-**-1 或 col-**-3 中的 4 个。如果你不填满它，它不会显得更大，虽然会有足够的空间。

这是一种在纯 html 中使用大小为 3 的列的解决方案，因此 4 张图像以合适的大小显示：

  <div class="container">
    <div class="row">
      <div class="col-md-12 col-sm-8 col-xs-8">
        <div class="col-md-3 col-sm-3 col-xs-3">
          <img class="img-responsive img-rounded" src="http://placehold.it/300" />
        </div>
        <div class="col-md-3 col-sm-3 col-xs-3">
          <img class="img-responsive img-rounded" src="http://placehold.it/300" />
        </div>
        <div class="col-md-3 col-sm-3 col-xs-3">
          <img class="img-responsive img-rounded" src="http://placehold.it/300" />
        </div>
        <div class="col-md-3 col-sm-3 col-xs-3">
          <img class="img-responsive img-rounded" src="http://placehold.it/300" />
        </div>
      </div>
    </div>
  </div>

顺便说一句：这是一种很酷的标记语言吗？