我试图创造一个有三个主件页：下面，我叫他们班.one，.two和.three。这三个div在移动设备（xs）上彼此堆叠，但是在sm视图上.three应同时作为边栏移到右侧，.one并.two应保持堆叠状态。
这是html：
<div class="container">
<div class="row one">
<div class="one col-xs-12 col-sm-8">
<div> lorem ipsum </div>
</div>
</div>
<div class="row two">
<div class="two">
<div class="col-xs-6 col-sm-2" id="Prev">
left arrow
</div>
<div class="col-xs-6 col-sm-2 col-sm-offset-4" id="Next">
right arrow
</div>
</div>
</div>
<div class="row three">
<div class="three col-xs-12 col-sm-3">
lorem ipsum
</div>
</div>
</div> <!--container -->
在视觉上，它是这样的：
.one col-sm-8 .three col-sm-3 col-sm-offset-1
.two col-sm-2* 2
我尝试不使用行来完成此操作，但是向左箭头.two col-sm-6填充到其右侧，.one col-sm-8并使其下方的其他两个div离开。随着三排，.three col-sm-3 col-sm-offset-1不能正确地上升到旁边.one col-sm-8。如何使这些列正常工作？
尝试
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-9">
<div class="row one">
<div class="col-xs-12"><div> lorem ipsum </div></div>
</div>
<div class="row two">
<div class="col-xs-6" id="Prev">left arrow</div>
<div class="col-xs-6" id="Next">right arrow</div>
</div>
</div>
<div class="three col-xs-12 col-sm-3">lorem ipsum</div>
</div>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句