Bootstrap网格问题

Question

我的页面在PC上看起来像这样：

我不会在移动尺寸上这样：

有可能解决这个问题吗？

Answer 1

见这里：http://getbootstrap.com/css/#grid-example-mixed

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

以上是阅读的地方。

这就是我要做的事情： 我首先要制作2列，在第一列内部，我会在彼此的顶部添加两个div。

我在每个div中使用了style=""来向您显示明确添加的CSS

http://jsfiddle.net/Preben/gmvuv8L0/

<div class="row">
      <div class="col-xs-6" style="min-height:300px;">
         <div style="width:100%;margin-bottom:20px;background:#cecece;min-height:180px;">content</div>
         <div style="width:100%;background:#cecece;min-height:100px;">content</div>
      </div>
      <div class="col-xs-6" style="background:#cecece;min-height:300px;">Column # 2</div>
</div>

Answer 2

我将实施divs＆＃34; left col＆＃34;和＃34;右col＆＃34;然后我会在第一个col（左侧col）中放入div。

这样的事情：

<div class="content" style="height:1000px;">
<div class="left-col col-xs-4 col-md-4">
  <div class="col-xs-12 col-xs-12">DIV 1</div>
  <div class="col-xs-12 col-xs-12">DIV 2</div>
</div>
<div class="right-col col-xs-8 col-xs-8">
  <div class="col-xs-12 col-md-12">DIV 3</div>
</div>
</div>

你还必须使用style =＆＃34; display：in-line;＆＃34;对于你想要的div而言，他们要与他人亲近，并且= =＃34; display：block;＆＃34;对于你想要的人而不是其他人。

你可能遇到的另一个问题是div不适合一行，看看bootstrap的响应式设计：

Bootstrap alredy带来了响应式设计，但只有768px（Ipad宽度）。您可以在列系统中使用此引导功能：

.col-xs-至＆lt; 768px .col-sm-至≥768px.col-md-至≥992px且.col-lg-至≥1200px

网络上有更多信息：http://getbootstrap.com/css/

如果您希望在768以下进行响应式设计，则需要使用以下方法自行完成：

例如，

@media（mix-width：600px，max-width：768px）。