这些代码在对齐Bootstrap3中的脚本时出了什么问题

Question

这只是一个例子来理解为什么脚本没有以正确的方式对齐。错误的部分在哪里？

下面的代码：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
      <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> 
 
      <h3>Cloud Computable</h3> 
 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <span class="glyphicon glyphicon-console" aria-hidden="true"></span> 
 
      <h3>GUI Free</h3> 
 
      <p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> 
 
      <h3>Backwards Compatible</h3> 
 
      <p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p> 
 
     </div> 
 
    </div>

在此先感谢。

Answer 1

来自您提供的任何代码的代码段实际上都是错误的。片段正在做你正在告诉divs要做的事情。 'col'引用是你想让div在扩大或缩小视图时要做的事情。引导程序使用网格系统view here来了解有关Bootstrap'col'用法的更多信息。

以下是您提供的代码片段，但使用'col-xs，col-md和col-lg'支持，并且在视图缩小或展开时视图正确且对齐。 jsfiddle

让我知道是否有帮助。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="row"> 
 
     <div class="col-xs-4 col-md-2 col-lg-4"> 
 
      <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> 
 
      <h3>Cloud Computable</h3> 
 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> 
 
     </div> 
 
     <div class="col-xs-4 col-md-2 col-lg-4"> 
 
      <span class="glyphicon glyphicon-console" aria-hidden="true"></span> 
 
      <h3>GUI Free</h3> 
 
      <p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> 
 
     </div> 
 
     <div class="col-xs-4 col-md-2 col-lg-4"> 
 
      <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> 
 
      <h3>Backwards Compatible</h3> 
 
      <p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p> 
 
     </div> 
 
    </div>