Bootstrap 网格系统疑问

Question

   我在项目开发的时候引用Bootstrap 网格系统；
   
   以<div class="add">
       <div class="container">
         <div class="row">
           <div class="col-md-3"></div>
           <div class="col-md-6"></div>
           <div class="col-md-3"></div>
         </div>
       </div>
   </div>
   
   
   这个add我没有写任何样式
   
   但是当我在这个<div class="add"></div>下面再写一个div的时候发现排版正常;
   
   相同代码第二个可以正常排版；第一个不能
   
   请问这是怎么回事![图片描述][1]

Answer 1

为最外层div的class添加row来清除浮动

<div class="container">
   <div class="row">
    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3"></div>
    <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6"></div>
    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3"></div>
   </div>
</div>

当然，在手机上要重新布局，修改col-xs-的值。

Answer 2

使用单一的一组 .col-md-*
栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在
” .row 内。

如 ：

<div class="row add">
    <div class="col-md-3"></div>
    <div class="col-md-6"></div>
    <div class="col-md-3"></div>
</div>

http://v3.bootcss.com/css/#grid

Answer 3

应该是你的add class的样式影响了Bootstrap 网格的样式