bootstrap基本网格

Question

为了学习响应式网页设计，我正在教自己如何使用bootstrap进行设计。我创建了一个基本网格;网格的代码如下所示。

HTML：

<div class="row">
  <div class="span6 red01">span6</div>
  <div class="span6 green01">span6</div>
</div>

CSS：

body { padding: 0px; }
.red01 { background: #ff0000; }
.green01 { background: #00ff00; }

我可以在我的网页上看到两个div，但问题在于它们是如何对齐的。我想在笔记本电脑的屏幕上水平对齐它们。我试过摆弄这个，但无法让它发挥作用。有人可以借给他们的专业知识吗？

Answer 1

请检查此JSfiddle for you

在此处查看结果Result of 2 col

  <div class="container">  
       <div class="row">  
          <div class="span12">  
             <h1>Bootstrap 12 col spanning full page</h1>   
   </div>
           <div class="span6">  
              <p> Paragraph test col1</p>   
       </div>  
       <div class="span6">  
               <p> Paragraph test col2.</p>   
        </div>  
       </div>  
    </div>

.container class - ＆gt;它是一个固定宽度的包装器，在bootstrap.css中预定义。

.container-fluid - ＆gt;这是流体包装

.row - ＆gt;此类构建为包含一行列。每个新行都会根据需要创建一个用于布置列的新区域。