栅格系统 - 中等及大型设备

我们在示例 - 堆叠到水平；中看到了基本的栅格系统。在这里，我们使用了 2 个 div，并在中等视口宽度下给予它们 50%/50% 的分割 -

<div class = "col-md-6">....</div>
<div class = "col-md-6">....</div>

但在大型设备上，您的设计可以做得更好，例如 33%/66%。所以我们要做的是，在断点处更改列宽度 -

<div class = "col-md-6 col-lg-4">....</div>
<div class = "col-md-6 col-lg-4">....</div>

现在 Bootstrap 会说：“在中等尺寸下，我会查看包含md的类并使用它们。在大尺寸下，我会查看包含lg的类并使用它们。在本例中，我们的 2 个 div 将从 50%/50% 的分割变为 33%/66%。在下面的示例中查看。（这里使用了每个列的样式，您可以避免它。）

<div class = "container">
   <h1>Hello, world!</h1>
   
   <div class = "row">
   
      <div class = "col-md-6 col-lg-4" 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 col-lg-8" 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>

这将产生以下结果 -