twitter-bootstrap 引导响应式 div 显示

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18962700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:32:49  来源:igfitidea点击:

bootstrap responsive div display

twitter-bootstrapresponsive-design

提问by lostpacket

I have two divs

我有两个div

<div class="container">
<div class="span6">
</div>
<div class="span6">
</div>
</div>

When the user uses mobile phone, the divs should be two rows one column instead of two columns one row.

用户使用手机时,div应该是两行一列,而不是两列一行。

How do I do that ?

我怎么做 ?

回答by Pavlo

From Bootstrap docs:

来自Bootstrap 文档

Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.

通过在文档中包含适当的元标记和附加样式表,在您的项目中启用响应式 CSS。如果您已从自定义页面编译 Bootstrap,则只需包含元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Also, use proper markup (.spanXshould be inside .row):

另外,使用适当的标记(.spanX应该在里面.row):

<div class="container">
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
</div>

For fluid layoutyou may use .container-fluidand .row-fluid.

对于流体布局,您可以使用.container-fluid.row-fluid