html - bootstrap well 在小屏幕上显示多行

Question

在我的开发环境中，我升级到 rails 4.1.0 并删除了一些旧的 Bootstrap 。现在，我主页上的 bootstrap Wells 不再适用于移动宽度屏幕。

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

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

github 链接中唯一发生变化的代码是删除了一些剩余的 Bootstrap 内容并更改了主屏幕横幅。

这是应该应用的代码

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