bootstrap responsive div display

问题

I have two divs

<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.

How do I do that ?

回答1:

From Bootstrap docs:

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.

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

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

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

For fluid layout you may use .container-fluid and .row-fluid.

来源：https://stackoverflow.com/questions/18962700/bootstrap-responsive-div-display