Bootstrap 3：img-responsive不使用pull-right

Question

为什么img-responsive合并到pull-right无法在移动设备上正常扩展？

我有以下代码：

<div class="row">
  <div class="container">
   <div class="pull-right">
    <a class="fancybox thumbnail" rel="features" href="test_image_small.jpg">
     <img class="img-responsive" src="test-image.jpg"})">
    </a>
   </div>

   <h2>Key Features</h2>
   <br />
   <ul>
    <li>Feature A</li>
    <li>Feature B</li>      
    <li>Feature C</li>        
    <li>Feature D</li>
   </ul>
 </div>
</div>

我已经检查了this question，但在我的情况下它没有帮助。

以下是实时示例：http://www.bootply.com/zbY6BrDbWI

感谢。

Answer 1

不确定我可以直接提供帮助，因为这个原因，我一直讨厌使用左/右拉班。我倾向于坚持使用Bootstraps网格系统并正确排序元素。例如;

<div class="container">

  <div class="row">
    <div class="col-sm-4">
      <h2>Key Features</h2>
      <br>
      <ul>
        <li>Feature A</li>
        <li>Feature A</li>      
        <li>Feature A</li>        
        <li>Feature A</li>
      </ul>
    </div>
    <div class="col-sm-8">
      <a class="fancybox thumbnail" rel="features" href="http://placehold.it/800x600.jpg">
        <img class="img-responsive" src="http://placehold.it/800x600.jpg">
      </a>
    </div>
  </div>

</div><!-- /.container -->

（注意我已经删除了导航HTML并稍微清理了代码）

如果您按照指定的顺序绝对需要它们（例如，为了强制图像在移动设备上位于顶部），您可以始终将拉出应用于网格，如下所示

<div class="container">

  <div class="row">
    <div class="col-sm-8 col-xs-12 pull-right">
      <a class="fancybox thumbnail" rel="features" href="http://placehold.it/800x600.jpg">
        <img class="img-responsive" src="http://placehold.it/800x600.jpg">
      </a>
    </div>
    <div class="col-sm-4">
      <h2>Key Features</h2>
      <br>
      <ul>
        <li>Feature A</li>
        <li>Feature A</li>      
        <li>Feature A</li>        
        <li>Feature A</li>
      </ul>
    </div>
  </div>

</div><!-- /.container -->

请注意我是如何应用col-xs-12类的。这迫使它知道它的宽度并使图像适合父容器。

的 DEMO JSFiddle 1

的 DEMO JSFiddle 2

希望这有帮助。