bootstrap 小屏幕时右侧留白问题

用bootstrap做pc和手机响应式页面时遇到的问题总结如下：

1. row放错位置-container下面如果要用ul包li的结构 直接把row的类名写在ul上
2. container的div盒子上不再写其他类名 ，如果要选择指定区域的下面的li 自己写的样式可以写到ul上
3. 清除浮动给父盒子加，别自己随便加到ul上…
4. 大于768 和特别小屏幕没问题，700左右右侧会留白，原因在于col的样式会有左浮动，而浮动的元素无法居中 所以需要使用定位搞定 （当然也可以去掉浮动后再margin auto）

@media screen and (max-width: 767px) {
    li {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}
 ul {
    position: relative;
}

  <div class="container">
      <h2>产品优势</h2>
          <ul class='row advantage'>
              <li class="col-lg-6 col-xs-12 clearfix">
                <img  class="fl" src="URL" />
                <div class="right_content">
                  <h4>多类型层次分类</h4>
                  <i></i>
                  <p>句子</p>
                </div>
              </li>
          </ul> 
    </div>