Bootstrap - 针对不同的屏幕分辨率以不同方式对齐 div

Question

我是使用 Bootstrap 的新手，我想创建图像中显示的内容。这是我的出发点。

 <div class='row'>
      <div class='col-sm-12 col-md-8'>text</div>
      <div class='col-sm-12 col-md-4'>
           <div>text</div>
           <div>
                <div><img src=''/></div>
                <div><img src=''/></div>
           </div>
      </div>
 </div>

Answer 1

此处重要的是要了解，如果您使用 Bootstrap 列 class，比如 .col-md-8，这将自动更改为屏幕尺寸的 100% 列宽小于 "md"。所以，不需要添加 .col-sm-12 因为它是自动的。

请查看我为实现您的目标而创建的Fiddle：https://jsfiddle.net/vandigroup/7qLq0tz8/4/

请记住，如上所述，在小于 "sm" 断点的设备上，列宽将更改为 100%。您可以向要控制的列添加一个额外的 .col-xs-*。