Question

我在容器中的一组跨度中显示条目。我希望在跨度中心有一个图像和几行文本。这没问题。当我减小窗口的水平尺寸时，所有的跨度都排列在容器的中心。有没有办法防止这种情况发生。这是代码：

<div class="well" style="padding-bottom:20px">
<div class="container">
<% @novels.each do |novel| %>
    <div class="span3">
        <div align="center"><%= link_to image_tag(novel.cover_thumbnail_url), novel %>
        <br />
        <%= link_to novel.name, novel%><br />
        <%= novel.edition %>
        </div>
    </div>
<% end %>
</div>

感谢。

Answer 1

我对他们的症状有点模糊，但也许这会有所帮助。

您是否尝试将整个声明包装在中心或使用style =“margin：0 auto”，因为不推荐使用center

[div style =“margin：0 auto”]这里的内容[/ div]

Answer 2

我不确定这是不是你想要的？

注意使用each_slice，这将导致span4中每行3行记录

<div class="well" style="padding-bottom:20px">
  <div class="container">

    <% @novels.each_slice(3) do |set| %><!-- NOTE: each_slice -->
      <div class="row">

        <% set.each do |novel| %>
          <div class="span4">
            <div style="text-align:center">
              <%= link_to image_tag(novel.cover_thumbnail_url), novel %>
              <br />
              <%= link_to novel.name, novel %>
              <br />
              <%= novel.edition %>
            </div><!-- end center -->
          </div><!-- end span4 -->
        <% end %><!-- end set.each -->

      </div><!-- end row -->
    <% end %>

  </div><!-- end container -->
</div><!-- end well -->

你可能想要清理它以使用部分，让它更容易看

Rails / bootstrap - 尝试将元素置于跨度内，但在缩小视口时跨越中心

2 个答案: