bootstrap 3.0 中的列仅垂直堆叠答案

【问题标题】：Columns in bootstrap 3.0 only stacking verticallybootstrap 3.0 中的列仅垂直堆叠
【发布时间】：2013-10-01 19:40:26
【问题描述】：

这里是一个真正的网页设计新手。我已经在网上尝试了很多地方来回答这个问题（包括这里），但无济于事。我正在尝试使用引导程序 3 中的基本网格。我的列仅垂直堆叠，它们不会并排放置，并且它们总是调整大小以填充浏览器窗口。这发生在桌面上的 Chrome 或 Firefox 中，同样的事情发生在我的移动设备（7 英寸或 4.7 英寸）上的 chrome 上。仅供参考，我刚刚使用 Sublime 2 进行编辑，并将所有引导文件保存在资源管理器中的文件夹下。不确定这是否相关。

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 101 Template</title>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- Bootstrap -->
       <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
    .col-xs-12{
    height: 100px;
    background-color: blue;
    color: white;
    text-align: center;
  }
  .col-xs-6{
    height: 100px;
    background-color: yellow;
    color: black;
    text-align: center;
    border: 2px solid black;
  }
</style>
</head>

   <div class="container">
  <div class="row">
      <div class="col-xs-12">col-xs-12
   </div>
  </div>

  <div class="row">
      <div class="col-xs-6">col-xs-6
      </div>
      <div class="col-xs-6">col-xs-6
      </div>

  </div>
  <div class="row">
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
   </div>
   <div class="row">
     <div class="col-md-8">.col-md-8</div>
     <div class="col-md-4">.col-md-4</div>
   </div>
   <div class="row">
     <div class="col-md-4">.col-md-4</div>
     <div class="col-md-4">.col-md-4</div>
     <div class="col-md-4">.col-md-4</div>
   </div>
   <div class="row">
     <div class="col-md-6">.col-md-6</div>
     <div class="col-md-6">.col-md-6</div>
   </div>
      </div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

对不起，糟糕的代码格式，在我度假时唯一方便的设备上很难做到这一点 - 我的 7 英寸平板电脑！

【问题讨论】：

您的代码在此处按预期工作：bootply.com/84307 -- 您在浏览器控制台中看到任何错误吗？

标签： css twitter-bootstrap

【解决方案1】：

您的代码的问题似乎是对

的引用

col-md-4

我对所有人进行了查找/替换

-md-

替换为

-xs-

它似乎与 Twitter 引导程序一起正常工作。看到这个 JSfiddle。 http://jsfiddle.net/jdSF3/ 身体

<div class="container">
  <div class="row">
      <div class="col-xs-12">col-xs-12
   </div>
  </div>

  <div class="row">
      <div class="col-xs-6">col-xs-6
      </div>
      <div class="col-xs-6">col-xs-6
      </div>

  </div>
  <div class="row">
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
     <div class="col-xs-1">.col-xs-1</div>
   </div>
   <div class="row">
     <div class="col-xs-8">.col-xs-8</div>
     <div class="col-xs-4">.col-xs-4</div>
   </div>
   <div class="row">
     <div class="col-xs-4">.col-xs-4</div>
     <div class="col-xs-4">.col-xs-4</div>
     <div class="col-xs-4">.col-xs-4</div>
   </div>
   <div class="row">
     <div class="col-xs-6">.col-xs-6</div>
     <div class="col-xs-6">.col-xs-6</div>
   </div>
      </div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

CSS

  .col-xs-12{
    height: 100px;
    background-color: blue;
    color: white;
    text-align: center;
  }
  .col-xs-6{
    height: 100px;
    background-color: yellow;
    color: black;
    text-align: center;
    border: 2px solid black;
  }

【讨论】：