1. WIKI教程
2. 学习Bootstrap
3. Example − Stacked-to-horizontal

Example − Stacked-to-horizontal

让我们来看看简单的网格布局一个简单的例子 - 两列，每列两段。 （这里使用的造型为每列，你能避免它。）

<div class = "container">
   <h1>Hello, world!</h1>
   <div class = "row">
      <div class = "col-md-6"  style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.</p>
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
            quae ab illo inventore veritatis et quasi architecto beatae vitae 
            dicta sunt explicabo.</p>
      </div>
      <div class = "col-md-6" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium.</p>
         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
            consectetur, adipisci velit, sed quia non numquam eius modi 
            tempora incidunt ut labore et dolore magnam aliquam quaerat 
            voluptatem.</p>
      </div>
   </div>
</div>

这将产生以下结果 -

新页面打开

Details

• 《div class = "container"》...《/div》被添加元素，以确保布局正确定心和最大宽度。

• 一旦容器被添加，接下来你需要考虑在列的条款。 添加《div class = "row"》...《/div》和列《div class = "col-md-6"》《/div》的行内。

• 网格中的每一行是由12个单位，你可以定义使用这些单位的列所需的大小。 在我们的例子中，我们有两个列，每列由6个单位宽，即6 + 6 = 12。

你可以尝试像一些更多的选择- 《div class = "col-md-3"》《/div》和《div class = "col-md-9"》《/div》或《div class = "col-md-7"》《/div》和《div class = "col-md-5"》《/div》

实验并确保我总是需要12。