只要用到栅格，就注意要清除浮动，清除方法就是在父元素的class上加一个clearfix

1.情景:

.

<div class="col-sm-7">

                <div class="news-list">

                    <div class="news-list-item ">

                        <div class="col-xs-5">

                            <img src="img/002.jpg">

                        </div>

                        <div class="col-xs-7">

                            <a href="#" class="title">2年前他为教育事业和高圆圆分手，今成这般，高圆圆：我有一句MMP如鲠在喉</a>

                            <div class="info">

                                <span><span class="avatar"><img src="img/logo.jpg"></span>王花花</span>⋅

                                <span>25k评论</span>⋅

                                <span>10分钟前</span>

                            </div>

                        </div>

                    </div>

                    <div class="news-list-item">

                        <div class="col-xs-5">

                            <img src="img/003.jpg">

                        </div>

                        <div class="col-xs-7">

                            <a href="#" class="title">2年前他为教育事业和高圆圆分手，今成这般，高圆圆：我有一句MMP如鲠在喉</a>

                            <div class="info">

                                <span><span class="avatar"><img src="img/logo.jpg"></span>王花花</span>⋅

                                <span>25k评论</span>⋅

                                <span>10分钟前</span>

                            </div>

                        </div>

                    </div>

出现这样的原因：主要是没有清除浮动

解决办法：

只需在父类上添加clearfix就可以了

即：<div class="news-list-item clearfix">

结果：

5.bootstrap栅格 清除浮动的更多相关文章

  1. bootstrap ch2清除浮动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  2. bootstrap ch2清除浮动+12

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：清除浮动1

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. bootstrap清除浮动问题

    所有的col-样式都是左浮动 <div class="row">    <div class="col-xs-6 col-sm-3">d ...

  5. Bootstrap栅格系统用法--Bootstrap基础

    1.栅格系统实现布局的原理 1)Bootstrap把屏幕的宽度拆分成12格(列),每一格像素的多少由设备屏幕分辨率决定,我们在开发项目的过程中不需要去指定像素或者百分比. 2)不同范围的分辨率对应不同 ...

  6. Bootstrap栅格系统&媒体查询

    bootstrap中几乎所有元素的盒子模型为IE下的盒模型,通俗点说就是box-sizing设置成了:border-box.   栅格系统 媒体查询 媒体查询是非常别致的"有条件的 CSS ...

  7. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  8. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Css清除浮动最优方式之一

    ---恢复内容开始--- .container:before, .container:after { display: table; content: " "; } .contai ...

随机推荐

  1. springboot文件上传： 单个文件上传 和 多个文件上传

    单个文件上传 //文件上传统一处理 @RequestMapping(value = "/upload",method=RequestMethod.POST) @ResponseBo ...

  2. 日志滚动与cron调度

    日志滚动与cron调度 1.日志滚动 nginx默认日志不能进行滚动,始终写入到一个文件中,即access.log.编写日志滚动的shell脚本,并使用linux的cron定时调度周期性进行日志文件滚 ...

  3. ES6相关特性(解构赋值)

    解构赋值:本质上是一种匹配模式,等号两边的模式相同,则左边的变量可以被赋予对应的值. 注意:null & undefined 不能解构赋值!!! 数组的解构赋值: let [a,[[b],c] ...

  4. Spring是如何管理Bean

    容器是什么?spring中是如何体现的?一直有疑惑,这两天看了一下Spring管理bean的Demo,对于Spring中的容器有了简单的认识. 我们知道,容器是一个空间的概念,一般理解为可盛放物体的地 ...

  5. 2017.10.29 C/C++/C#程序如何打成DLL动态库

    C/C++程序如何打成DLL动态库: **1.在VS中新建main.h,添加如下内容:** extern "C" _declspec(dllexport) int onLoad() ...

  6. unity简单例子

    1. https://www.cnblogs.com/chengxuzhimei/p/4992106.html 2.https://www.cnblogs.com/GreenLeaves/p/7086 ...

  7. Ubuntu搜狗输入法无法输入中文等问题

    Linux版本的搜狗输入法经常崩溃,无法输入中文,今天作下记录,环境:Ubuntu14.04 64位 1.安装和卸载 Linux搜狗是基于框架fcitx的,先得安装框架Ubunt安装搜狗方法 也可以直 ...

  8. js中的变量提升（Hoisting）

    <script> function test(){ console.log(a); console.log(foo()); var a=1; function foo(){ return ...

  9. BZOJ2752: [HAOI2012]高速公路(road)(线段树 期望)

    Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1820  Solved: 736[Submit][Status][Discuss] Descripti ...

  10. java后台输入数据的2种方式

    java后台输入数据的2种方式 (1) import java.io.BufferedReader; import java.io.InputStreamReader; public class 输入 ...