【7】了解Bootstrap栅格系统基础案例（2）_html/css

首页

web前端

html教程

【7】了解Bootstrap栅格系统基础案例（2）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:05 PM

bootstrap基础栅格案例系统

ps.这一次要说的是“Responsive column resets”，但是不知道为什么中文官网没有给出翻译，但是在看到案例的时候，感觉这就像一个bug，我自己姑且叫这个是一个高度bug吧，方便自己，要是大家有其他好的说法，请告诉我。

=================================================================================================

Responsive column resets就是在某些阈值时，某些列可能会出现比别的列高的情况。这个情况可能不是你所要的，建议使用.clearfix（清理浮动）和响应式工具classe的组合，

清理浮动就不说了，有一定基础的都应该清楚了，至于响应式工具classe以后会说到（可以去中文官网看看），这里就是让大家知道有这么一个高度bug的情况。

=================================================================================================

直接贴代码

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <!-- Bootstrap不支持IE的兼容模式，加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 -->    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!-- 由于Bootstrap 3是移动设备优先，加入此标签是为了确保适当的绘制和触屏缩放 -->    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Bootstrap-Template-04</title>    <!-- 最新 Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[if lt IE 9]>        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>    <![endif]-->    <style>.show-grid { margin-top: 15px; }.show-grid [class^="col-"] {  padding-top: 10px;  padding-bottom: 10px;  background-color: #eee;  border: 1px solid #ddd;}    </style></head><body><div class="container"><h1 id="Responsive-column-resets-small-我自己叫这个是高度bug-small">Responsive column resets<small>我自己叫这个是高度bug</small></h1><div class="row show-grid">  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3<br>内容要多多---内容要多多---内容要多多---内容要多多---内容要多多---内容要多多</div>  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div></div></div>    <!-- 所有 Bootstrap 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入 -->    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script></body></html>

首页我们先看看这个在大屏sm方案下的效果图（sm方案是3+3+3+3=12，正好一行）

从这个图上我们一眼就看到最前面的内容太多，把高度撑起来了，那在xs方案下的效果怎么样（xs方案是6+6=12一行，一共有2行）

第一种效果：

第二种效果

通过拉缩浏览器，我们看到了2种效果，但是没有一种是我们所要的效果，这时候，你是不是感觉出bug了啊，我想也是，官网给出了一种解决方案（使用.clearfix（清理浮动）和响应式工具classe的组合）

下面我们就来看看修改后的代码（我只贴出主要是地方）

<div class="row show-grid">  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3<br>内容要多多---内容要多多---内容要多多---内容要多多---内容要多多---内容要多多</div>  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>  <!-- 在某些阈值时，某些列可能会出现比别的列高的情况。这个情况可能不是你所要的，建议使用.clearfix（清理浮动）和响应式工具classe的组合 -->  <div class="clearfix visible-xs"></div>  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div></div>

这时候我们来看看效果吧

这下正好是xs的方案的样子了，哈哈。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

los是什么系统Nov 07, 2022 pm 04:31 PM

los就是LineageOS，是一个基于Android面向智能手机以及平板电脑的开放源代码操作系统。los的前身为Cyanogenmod，通常称CM，是全球最大的安卓第三方编译团队，促进了用户的安卓版本的第三方升级，在早期曾经先于谷歌为很多手机定制了稳定版的安卓1.6，此后该团队的联合创始人及核心团队，重组了全新的LineageOS，继续为用户提供免费的第三方系统支持。

操作系统实现按名存取的关键在于解决什么Aug 17, 2022 am 11:17 AM

操作系统实现按名存取的关键在于解决文件名称与具体的物理地址的转换；实现逻辑文件到物理文件间的转换，即按名存取外存上的文件，按名存取实现文件的共享和保密，不同用户能在系统的控制下共享其他用户的文件。

SAP系统的五大模块是什么Sep 29, 2022 am 11:52 AM

SAP五大模块是：1、物料管理模块，主要有采购、库房与库存管理、供应商评价等管理功能；2、工厂维护模块，提供对定期维护、检查与服务管理的规划、控制和处理；3、质量管理模块，可提供质量计划、质量检测、质量控制、质量文档等功能；4、销售与分销模块，包括销售计划、询价报价、订单管理、运输发货、发票等的管理；5、生产计划模块，可实现对工厂数据、生产计划、能力计划、成本核算等的管理。

荣耀手机是什么系统Jul 27, 2022 am 10:23 AM

荣耀手机使用的是“Magic UI”、“EMUI”和“HarmonyOS”操作系统；荣耀的新机型采用的都是“Magic UI”系统，旧机型普遍使用的是基于安卓的EMUI系统，而部分机型支持升级为华为研发的HarmonyOS操作系统。

funtouch os是什么系统Aug 22, 2022 am 11:43 AM

“funtouch os”是vivo基于安卓系统开发的智能手机操作系统；“funtouch os”是针对vivo公司中高端手机推出的一款人性化手机操作系统，该系统与2013年10月发布，以用户体验为核心，以简约、乐趣、智慧、理念为设计导向。

PHP基础教程：从入门到精通Jun 18, 2023 am 09:43 AM

PHP是一种广泛使用的开源服务器端脚本语言，它可以处理Web开发中所有的任务。PHP在网页开发中的应用广泛，尤其是在动态数据处理上表现优异，因此被众多开发者喜爱和使用。在本篇文章中，我们将一步步地讲解PHP基础知识，帮助初学者从入门到精通。一、基本语法PHP是一种解释性语言，其代码类似于HTML、CSS和JavaScript。每个PHP语句都以分号;结束，注

ghost的本质是什么Aug 29, 2022 pm 03:27 PM

Ghost的本质是对磁盘或者硬盘进行快速备份与还原；利用Ghost安装Windows系统最大的优点就是速度快而且一键安装，并且Ghost系统大多集成了大多数电脑所需要的驱动程序以及一些常用的应用软件。需要注意：1、通过网络下载到的Ghost系统，其预置的驱动程序与自己的电脑可能不兼容，会导致安装之后出现蓝屏而无法正常使用；2、Ghost系统捆绑安装的应用软件太多。

miui是什么系统Oct 27, 2022 pm 03:59 PM

miui是小米公司旗下基于Android系统深度优化、定制、开发的第三方手机操作系统。MIUI在Android系统基础上，针对中国用户进行了深度定制，专为小米智能手机设计，包含红米系列，同时支持手机物联。在隐私方面，miui系统会记录各应用的一切敏感行为，并呈现出来；当应用使用相机、录音、定位权限时，系统会给出明显提示，点击提示即可进行管控。

See all articles