来源于：https://blog.csdn.net/qq_21794603/article/details/68585249
Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类数据。在开发中可以只写一套代码在手机，平板，PC端都能使用，二不用考虑使用媒体查询（针对不同的设备分别写不同的代码）。Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流逝栅格系统，随着屏幕或者视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局；
栅格系统的工作原理：
1、行（row）必须包含在.container（固定宽度）或者.container-fluid（100%宽度）中，一遍为其赋予合适的排列（aligment）和内部（padding）；
2、通过行（row）在水平方向创建一组列（column）；
3、自己内容应当放置与类（column）内，并且只有列可以作为行（row）的直接子元素。
4、类似.row和col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化布局。
5、通过为列设置padding属性，从而创建列与列直接的间隔（gutter）。通过为.row元素设置负值margin从而抵消为.container元素设置的padding，也就间接行为（row）说包含的列（column）抵消了padding。
6、栅格系统的列是通过制定的1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个col-xs-4来创建。
7、如果一行（row）中包含了的列（column）大于12，多余的列所在的元素将作为一个整体另起一行排列。
8、栅格类适用于与屏幕宽度大小或等于分界点大小的设备，并且针对小屏幕覆盖栅格类。
使用Bootstrap响应式布局：
首先需要在head中引入meta标签，添加viewport属性，content中宽度等于设备宽度，initial：页面首次被显示可见区域的缩放级别，取值1，则页面按时间尺寸显示，无任何缩放；
maximum-scale:允许用户缩放到的最小比例；
user-scalable：用户是否可以手动缩放。代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">
来源：https://www.cnblogs.com/hhjc/p/9639434.html