在xs设备中重新安排div的问题
Ber*_*era 4 html twitter-bootstrap
图A显示了我对sm,md和lg设备的设计.在xs设备的情况下,块B应显示在块A上方(如图B所示).但我不知道代码有什么问题.有人请帮助我.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2 col-xs-push-12">A</div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 col-xs-pull-12">B</div>
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">C</div>
</div>
</div>
</body>
</html>
这是我第一次接触Bootstrap,但经过一些研究后,我发现只有较小屏幕尺寸(https://stackoverflow.com/questions/21933664/bootstrap-3-push-pull-columns-only-on-smaller-screen-sizes)的页面Bootstrap 3:推/拉列对你的问题非常有用.
我建议用A替换A,B和C的线......
<div class="col-xs-12 col-sm-6 col-sm-push-3" style="background-color:lightcyan;">B</div>
<div class="col-xs-12 col-sm-3 col-sm-pull-6" style="background-color:red;">A</div>
<div class="col-xs-12 col-sm-3" style="background-color:yellow;">C</div>
我使用通过http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp找到的Try-It-Yourself编辑器测试了此代码,并生成了所需的结果.
注意:Bootstrap优先选择较小的屏幕尺寸.因此,您应该将代码布局为适合xs设备,并添加更大屏幕尺寸的代码,以便在适当的情况下覆盖较小屏幕尺寸的代码.
例如,在我上面我只需要为sm设备添加代码,因为当我们使用sm或更大的设备时发生转换.
如果我听起来太罗嗦,我道歉.请随时提出任何后续问题.
| 归档时间： |
|
| 查看次数： |
58 次 |
| 最近记录： |