Question

在Bootstrap 3中，我有：

<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应该在不同的列中。

有什么建议吗？

Answer 1

使用嵌套（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>

通过向http://getbootstrap.com/css/#overview-responsive-images

添加课程img-responsive，确保您的图片具有响应性

根据Bootstrap3中的分辨率更改列的内容

1 个答案: