【问题标题】:Rails/bootstrap - Trying to center elements inside a span, but spans center when shrinking viewportRails/bootstrap - 尝试在跨度内居中元素,但在缩小视口时跨越中心
【发布时间】:2013-03-31 02:50:26
【问题描述】:

我正在容器中的一组跨度中显示条目。我想要一个图像和几行文本以跨度为中心。这工作正常。当我减小窗口的水平尺寸时,所有跨度都在容器的中心排列。有没有办法防止这种情况发生。代码如下:

<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>

谢谢。

【问题讨论】:

    标签: css ruby-on-rails twitter-bootstrap


    【解决方案1】:

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

    您是否尝试将整个语句包装在中心或使用 style="margin:0 auto" 因为中心已被弃用

    [div style="margin:0 auto"]你的内容在这里[/div]

    【讨论】:

    • 当我折叠页面时,这可以防止跨度居中,但不会使图像和文本行居中。不过你给了我一些想法。谢谢。
    • 您可能想使用 &lt;div style="text-align: center"&gt; 进行居中 - 但是当您说 spans 时,您是指带有 div 标记的 class="span3" - 引导响应式设计应该将它们折叠为视口变小了——但我认为你通常想要这种标签层次结构container/row/span,即&lt;div class="container"&gt;&lt;div class="row"&gt;&lt;div class="span3"&gt;xxxx&lt;/div&gt;&lt;div class="span9"&gt;...
    【解决方案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 -->
    

    你可能想清理它以使用部分,使其更容易查看

    【讨论】:

    • 这是一个非常好的建议。我真的很喜欢切片的想法。不幸的是,当减小页面的水平尺寸时,它仍然显示所有记录折叠到中心的相同行为。
    • 它是响应式设计,您可以尝试将其关闭 - stackoverflow.com/questions/12219760/… - 但它可以让您的网站在平板电脑和智能手机上看起来更好
    猜你喜欢
    • 1970-01-01
    • 2012-05-26
    • 2015-05-28
    • 2013-04-22
    • 1970-01-01
    • 1970-01-01
    • 2020-08-09
    • 1970-01-01
    • 2012-12-08
    相关资源
    最近更新 更多