Question

这是一个真正的网页设计新手。我在网上尝试了很多地方来回答这个问题（包括这里），但无济于事。我在引导程序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英寸平板电脑！

Answer 1

您的代码似乎是对

的引用

col-md-4

我为所有

运行了一个find / replace

-md-

并将其替换为

-xs-

它似乎与Twitter bootstrap一起正常工作。看到这个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;
  }

bootstrap 3.0中的列仅垂直堆叠

1 个答案: