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

.container-fluid -> 流体包装器

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