1. WIKI教程
2. 学习Bootstrap
3. Example − Mobile, tablet, desktops

Example − Mobile, tablet, desktops

我们已经看到了一个例子Medium and Large Device 。 现在让我们把它带到另一个层次，在这里我们想改变它为手机小尺寸的外部也是如此。 假设我们要添加的列的药片被分割75％/ 25％的选择，我们是这样的 -

<div class = "col-sm-3 col-md-6 col-lg-4">....</div>
<div class = "col-sm-9 col-md-6 col-lg-8">....</div>

现在，这给我们在每个点3个不同的列布局。 在手机上，这将是在左侧75％，右侧25％。 上的片剂，这将是50％/ 50％再次，并在一个大的视口，这将是33％/ 66％。 三种不同的布局为三个响应大小。 检查它在下面的例子。 （这里使用的造型为每列，你能避免它。）

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

这将产生以下结果 -

新页面打开