Question

我有一个常规网格，可以在移动和桌面视图的位置正确移动所有内容。

但我想在移动视图中将我的标题移到图像上。任何人都知道如何嵌套块？

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="image">
                <img src="http://placehold.it/350x150" />
            </div>
         </div>
         <div class="col-sm-8"><h1>Lorem ipsum dolor sit amet</h1>
             <div class="row">
                 <div class="col-sm-12">Lorem ipsum dolor sit amet...</div>
             </div>
         </div>
    </div>
</div>

演示：http://www.bootply.com/d9WbmWJCGv

Answer 1

您可以使用pull-left和pull-right进行此操作，img-responsive有助于避免图像重叠。

Bootply Example

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-8 pull-right">
      <h1>Lorem Ipsum...</h1>
    </div>

    <div class="col-xs-12 col-sm-4">
      <img src="http://placehold.it/350x150" class="image img-responsive">
    </div>

    <div class="col-xs-12 col-sm-8 pull-right">
      <p>Sed ut perspiciatis unde omnis...</p>
    </div>
  </div>
</div>

在Bootply中，我还将.red，.blue，.green添加到css表中以帮助查看正在发生的事情。只需要un-x'd。

Bootstrap网格布局 - 在移动视图中移动阻止

1 个答案: