bootstrap布局之解决间隔问题
来源:互联网 发布:幼儿网络安全教育教案 编辑:程序博客网 时间:2024/06/06 17:22
用bootstrap布局时会产生一些问题,比如col水平间距过大,
知其所以然才能最终解决问题;
当布局时把在行里面添加div:
代码如下:
<div class="container">
<div class="row">
<div class="col-md-4"><div class="box"></div></div>
<div class="col-md-4"><div class="box"></div></div>
<div class="col-md-4"><div class="box"></div></div>
</div>
</div>
哇!其实效果不想这样的,改改吧:
给每个box来一个margin-left:-20px;咋样啦:
看起来还不错呢,但用过margin的会知道,现在的div块已经不居中了,
这样感觉损失了一部分东西去得到另一部分东西,并不很好的策略,
我们得知道间距是怎么造成的,打开开发者工具就能发现
而它的父容器列却有390px
可以看到只要消除了padding,就可以让间距缩小了是吗?
css代码:
[class*="col-"]{
padding: 5px;
}
如图:
很完美!
阅读全文
1 0
- bootstrap布局之解决间隔问题
- Bootstrap之布局
- bootstrap之网格布局
- 使用bootstrap之轮播插件不自动播放的问题和播放时间间隔的问题解决方法
- bootstrap网格布局自适应问题
- bootstrap 响应式布局 居中问题
- Bootstrap布局框间间距问题
- Android 解决布局问题
- BootStrap 教程 之 布局组件(03)
- Bootstrap学习之二:栅格化布局
- 响应式布局值之Bootstrap
- NSDate,NSString相互转换,解决八小时间隔问题
- 解决UICollectionView间隔设置为0时仍有空隙的问题
- 解决行内元素之间的间隔bug问题
- Bootstrap 布局
- Bootstrap布局
- Bootstrap 布局
- Bootstrap布局
- pt-query-digest详解慢查询日志
- 滴滴秋招笔试第二题
- 阵列信号处理工具箱DBT
- 实现多渠道打包并根据渠道不同而依赖于不同的Maven项目
- Java 语言中 Enum 类型的使用介绍
- bootstrap布局之解决间隔问题
- 硬币表示
- Servlet文件上传
- 关于使用ubuntu12.04安装ROS install阶段一直出现的404,403错误的解决办法
- 代码编辑器应该有语法高亮、自动补全,代码提示,格式化功能,代码跳转
- linux find 命令详解
- HTML meta标签总结,HTML5 head meta属性整理
- 全志R16平台的Android6系统下调通rtl8189es(分色排版)V1.1
- Java Socket学习(二)——客户端服务端相互传输数据