更改取决于分辨率Bootstrap3

列的内容在引导3，我有：更改取决于分辨率Bootstrap3

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4"> 
     <img ...> 
     <p>...</p> 
    </div> 
    <div class="col-md-4"> 
     <img ...> 
     <p>...</p> 
    </div> 
    <div class="col-md-4"> 
     <img ...> 
     <p>...</p> 
    </div> 
</div> 
</div>

这给：

IMG IMG IMG 

Text Text Text

，当我去到一个更小的屏幕，它进入：

IMG 
Text 

IMG 
Text 

IMG 
Text

我想保留一个大页面的布局，但对于我想要的小页面：

IMG Text 
IMG Text 
IMG Text

这将是同样的事情：

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-6 col-sm-6"> 
     <img ...> 
     <img ...> 
     <img ...> 
    </div> 
    <div class="col-xs-6 col-sm-6"> 
     <p>...</p> 
     <p>...</p> 
     <p>...</p> 
    </div> 
</div> 
</div>

，只是不为大屏幕工作。

我不知道怎么说，“当页大，IMG和p应该在同一列，但页面时小，IMG和p应该在不同的列。

任何建议

来源

2013-12-12 Ander

在您试过的东西上发布JSBin。 – Christina

好吧，我只是想出了如何做到这一点，但并不优雅：http://jsbin.com/idIqEXaMI/1/edit – Ander

将自然数量的文本和实际图像放在Bin中是有帮助的。 http://jsbin.com/idIqEXaMI/2/edit。这是对响应式实用程序的错误使用，因为您要加载图像和文本两次。你可以使用CSS：http://jsbin.com/idIqEXaMI/4/edit – Christina

使用嵌套（http://getbootstrap.com/css/#grid-nesting）来解决问题：？

<div class="container"> 
<div class="row"> 
    <div class="col-xs-12 col-sm-4"> 
     <div class="row"> 
      <div class="col-xs-6 col-sm-12">IMG</div> 
      <div class="col-xs-6 col-sm-12">TXT</div> 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
     <div class="row"> 
      <div class="col-xs-6 col-sm-12">IMG</div> 
      <div class="col-xs-6 col-sm-12">TXT</div> 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
     <div class="row"> 
      <div class="col-xs-6 col-sm-12">IMG</div> 
      <div class="col-xs-6 col-sm-12">TXT</div> 
     </div> 
    </div> 
</div> 
</div>

NB加入img-responsive类使它响应您的图像，http://getbootstrap.com/css/#overview-responsive-images

来源

2013-12-14 13:08:52

更改取决于分辨率Bootstrap3

回答

相关问题