boostrap使用时的注意点

首先先来看一个小例子：
代码：

效果：

这里没有给父元素高度，但是给了子元素高度，那么父元素的就会被子元素撑开，父元素的宽度还是100%，但是高度就会变成200px，这是毫无疑问的。
但是如果我们想要inner变成响应式的，那么就要再在这个html文件中，引入了Jquery和Boostrap，我们给inner添加响应式的类名：
比如：
html:

<div class="outer">
  <div class="col-md-5 inner" style="height: 200px; background-color: red">
    inner
  </div>
</div>

css:

<style>
  .row {
    background-color: pink;
  }
  div[class^="col-md"] {
    padding: 0;
    border: 1px solid red !important;
  }
</style>

效果：

可见，outer的高度已经变成0了，造成这个的原因就是浮动：

这个问题困扰了我差不多一天了，终于发现了原因，解决方案如下：

官网已经说的很明白了，想要使用像col-md等这样的预定义的类名，就必须要在外边加上一层row类，在row类外边还加上一层container或者contaner-fluid类。
那么我们吧这两个类加上去，看看效果：

<div class="outer">
  <div class="row">
    <div
      class="col-md-5 inner"
      style="height: 200px; background-color: red"
    >
      inner
    </div>
  </div>
</div>

完美解决，其中的原理估计大家也都是知道了，肯定是row这个类是清楚浮动的，不过它自带左右的15的padding的，不想要的可以删除。
然后我们又会发现一个问题：我们innter文字，没有显示全，那么这是什么原因呢？
这又要提到Boostraop的栅格系统了，最外边必须要给上一个container或者container-fluid类才可以，我们加上去在看效果：

<div class="container-fluid outer">
  <div class="row">
    <div
      class="col-md-5 inner"
      style="height: 200px; background-color: red"
    >
      inner
    </div>
  </div>
</div>

Amazing，完美！！！
原理就是container-fluid类带有左右的15px的padding
最后再总结一下：
1.如果只是用col-类名的话虽然也可以实现响应式，但是他的父元素的高度会变为0，因此加上row这个类就可以解决高度为0的问题，但是加上这个就会发现还有问题，那就就要再父元身上再加上container-fluid类，然后才算完美。
2.container-fluid这个类如果不加的话，那么里面元素会紧挨着浏览器，如果加上去的话那么他就会带有左右15像素的padding，使用row可以解决这个问题。
3.带有container和container-fluid和row类的元素都可以清除浮动，带有col-开头类名的元素都会进行浮动。