在xs设备中重新安排div的问题

时间：2015-09-23 10:25:04

标签： html twitter-bootstrap

enter image description here          图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>

1 个答案:

答案 0 :(得分：5)

这是我第一次接触Bootstrap，但经过一些研究后我发现页面Bootstrap 3: Push/pull columns only on smaller screen sizes（https://stackoverflow.com/questions/21933664/bootstrap-3-push-pull-columns-only-on-smaller-screen-sizes）对你的问题非常有用。

我建议你用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或更大的设备时会发生转换。

如果我听起来太罗嗦，我道歉。请随时提出任何后续问题。

相关问题
最新问题