我正在尝试实现一个页面,在较大的屏幕中我有三个 div,而在较小的屏幕中希望中间的 div 位于顶部并采用完整的列宽,即 col-xs-12
我写了下面的代码:-
<div class="row" style="margin:100px">
<div class="col-sm-4 push-col-xs-6" style="border: 1px solid;min-height: 300px;">
The default Carousel
</div>
<div class="col-sm-4 pull-col-xs-12" style="border: 1px solid;min-height: 300px;">
<img src='https://files.abc.com/uploads/fanbook/thumbs/1450524216-9.jpg' class="img img-responsive" style="position:relative">
<h3 style="position:absolute" class="home_mer">Official<br>Merchandise<br>Partner</h3>
</div>
<div class="col-sm-4 col-xs-6" style="border: 1px solid;min-height: 300px;">
<img src='https://files.abc.com/uploads/fanbook/thumbs/1450524216-9.jpg' class="img img-responsive" style="position:relative">
<h3 style="position:absolute" class="home_blog">Company<br>Blog</h3>
</div>
</div>
因此,如上所述,我想在 col-xs-6 中将官方商品合作伙伴置于移动 View 的顶部,将其他两个置于其下方。
谁能帮忙
最佳答案
只需为 col-sm
使用 pull 和 push 类 ..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="margin:100px">
<div class="col-xs-12 col-sm-4 col-sm-push-4" style="border: 1px solid;min-height: 300px;">
<img src='https://files.abc.com/uploads/fanbook/thumbs/1450524216-9.jpg' class="img img-responsive" style="position:relative">
<h3 style="position:absolute" class="home_mer">Official<br>Merchandise<br>Partner</h3>
</div>
<div class="col-xs-6 col-sm-4 col-sm-pull-4" style="border: 1px solid;min-height: 300px;">
<!-- <slick class="thumbList" settings="jumboSlickPanel" style="position: inherit !important;"> -->
<!-- <img class="thumbnail" src="{{'https://files.abc.com/uploads/products/thumbs96_108/'+product.images.original[0].name}}"> -->
<!-- <img class="thumbnail_fan" ng-repeat="fanbook in fan" src="{{'https://files.aboads/fanbook/thumbs/'+fanbook.image.image_file_name}}" style="line-height: 0px;">
</slick> -->
</div>
<div class="col-sm-4 col-xs-6" style="border: 1px solid;min-height: 300px;">
<img src='https://files.abc.com/uploads/fanbook/thumbs/1450524216-9.jpg' class="img img-responsive" style="position:relative">
<h3 style="position:absolute" class="home_blog">Company<br>Blog</h3>
</div>
</div>
关于html - 如何在 Bootstrap 的小屏幕上将中间的 div 推到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38825040/