使用bootstrap网格系统自适应盒子宽度时保持所有盒子高度一致。

标签：另一个   .com   str   响应式布局   网格系统   png   highlight   com   网格   

使用了bootstrap网格系统的好处是很容易便实现了响应式布局，盒子可以根据设置的样式，随着屏幕的大小改变而自动改变宽度，但是也存在一个问题，那就是盒子的高度是由盒子的内容决定的，如果盒子里的内容不一样，会导致盒子的高度不一致，这样会使界面不太美观，并且可能会影响后面的盒子。可能的界面如下：

然而，我想要的是一排盒子的高度一致，如果把盒子高度固定住，比如：height：500px；会导致屏幕大小变化时，盒子高度没有随着宽的改变而改变，所以我找到了另一个方法：

把盒子的高度设为0，利用padding撑起高度：

height: 0;
padding:0 0 200% 0;

 如上所示，如果把下padding设为200%，那么无论宽度如何变化，宽和高的比都是1:2，这样你就可以随自己需要设置宽和高的比例了，是不是觉得很方便呢。效果图如下：

终于得到我想要的结果了。

使用bootstrap网格系统自适应盒子宽度时保持所有盒子高度一致。

标签：另一个   .com   str   响应式布局   网格系统   png   highlight   com   网格   

原文地址：http://www.cnblogs.com/zqqya/p/7396211.html