Question

在我的开发环境中，我升级到rails 4.1.0并删除了一些旧的引导程序。现在，我主页上的引导程序Wells不再使用移动宽屏幕。

这是我目前尚未应用于生产的最后一次提交。 https://github.com/kacole2/JumpSquares/commit/afbcfbecdb3dc785dc6cb8469fadd2452464cef1

如果您前往http://www.jumpsquares.net的生产网站并缩小宽度，则可以正常工作。但是，当我在开发中运行时，它看起来很乱，如下所示：

Imgur

github链接中唯一更改的代码是删除一些剩余的引导程序并更改主屏幕横幅。

以下是应该应用的代码

<div class="page-header">   
   <div class="row">    
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm">
          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">     
            <%=link_to image_tag("twitter-avatars/johnnie1.png"), "https://twitter.com/JohnnieITatDell"  %>  
          </div>
          <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            <a href="https://twitter.com/JohnnieITatDell">@JohnnieITatDell</a>: "JumpSquares is freakishly brilliant."
          </div>
     </div>

     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">     
            <%=link_to image_tag("twitter-avatars/herseyc.png"), "https://twitter.com/herseyc"  %>   
          </div>
          <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            <a href="https://twitter.com/herseyc">@herseyc</a>: "Fantastic home lab bookmark tool" (<a href="http://www.vhersey.com/2014/03/jumpsquares-fantastic-home-lab-bookmark-tool/"><font color="#18bc9c">blog post</font></a>)
          </div>
     </div>

     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">     
            <%=link_to image_tag("twitter-avatars/vnelson.png"), "https://twitter.com/vNelsonTX"  %>     
          </div>
          <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            <a href="https://twitter.com/vNelsonTX">@vNelsonTX</a>: "Really digging JumpSquares, great job!"
          </div>
     </div>
   </div>
   <div class="row">
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">     
            <%=link_to image_tag("twitter-avatars/h0bbel.png"), "https://twitter.com/h0bbel"  %>     
          </div>
          <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
            <a href="https://twitter.com/h0bbel">@h0bbel</a>: "We discussed JumpSquares on <a href="http://vsoup.net/2014/01/vsoup-general-purple-is-better-than-agent-purple-any-day-40/#podPressPlayerSpace_1"><font color="#18bc9c">vSoup</font></a> today. I think you should listen to it" (31:30)
          </div>
     </div>
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">     
            <%=link_to image_tag("twitter-avatars/mdent.png"), "https://twitter.com/mikedent13"  %>  
          </div>
          <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
            <a href="https://twitter.com/mikedent13">@mikedent13</a>: "You’ve changed the way I manage my bookmarks with JumpSquares. Just flat out awesome!"
          </div>
     </div>
   </div>
</div>

Answer 1

我能够通过在每个孔中添加额外的行来解决这个问题

<div class="page-header">   
   <div class="row">    
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm">
        <div class="row">
          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">     
            <%=link_to image_tag("twitter-avatars/johnnie1.png"), "https://twitter.com/JohnnieITatDell"  %>  
          </div>
          <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            <a href="https://twitter.com/JohnnieITatDell">@JohnnieITatDell</a>: "JumpSquares is freakishly brilliant."
          </div>
        </div>
     </div>

     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
        <div class="row">
          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">     
            <%=link_to image_tag("twitter-avatars/herseyc.png"), "https://twitter.com/herseyc"  %>   
          </div>
          <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            <a href="https://twitter.com/herseyc">@herseyc</a>: "Fantastic home lab bookmark tool" (<a href="http://www.vhersey.com/2014/03/jumpsquares-fantastic-home-lab-bookmark-tool/"><font color="#18bc9c">blog post</font></a>)
          </div>
        </div>
     </div>

     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
        <div class="row">
          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">     
            <%=link_to image_tag("twitter-avatars/vnelson.png"), "https://twitter.com/vNelsonTX"  %>     
          </div>
          <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            <a href="https://twitter.com/vNelsonTX">@vNelsonTX</a>: "Really digging JumpSquares, great job!"
          </div>
        </div>
     </div>
   </div>
   <div class="row">
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
        <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">     
            <%=link_to image_tag("twitter-avatars/h0bbel.png"), "https://twitter.com/h0bbel"  %>     
          </div>
          <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
            <a href="https://twitter.com/h0bbel">@h0bbel</a>: "We discussed JumpSquares on <a href="http://vsoup.net/2014/01/vsoup-general-purple-is-better-than-agent-purple-any-day-40/#podPressPlayerSpace_1"><font color="#18bc9c">vSoup</font></a> today. I think you should listen to it" (31:30)
          </div>
        </div>
     </div>
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
        <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">     
            <%=link_to image_tag("twitter-avatars/mdent.png"), "https://twitter.com/mikedent13"  %>  
          </div>
          <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
            <a href="https://twitter.com/mikedent13">@mikedent13</a>: "You’ve changed the way I manage my bookmarks with JumpSquares. Just flat out awesome!"
          </div>
        </div>
     </div>
   </div>
</div>

bootstrap很好地在小屏幕上进行多行

1 个答案: