html - 引导基本网格

Question

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

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

在此处查看结果 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-> 它是一个固定宽度的包装器，在 bootstrap.css 中预定义。

.container-fluid-> 这是流体包装

.row--> 这个类被构建为包含一行列。每个新行都会创建一个新区域，用于根据需要布置列。