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或4个col-**-3。如果你没有填满它，虽然有足够的空间但它看起来不会更大。

这是普通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>

BTW：这是一种很酷的标记语言吗？

如何使用twitter bootstrap使图像库工作？

1 个答案: