热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

bootstrap布局之解决间隔问题

用bootstrap布局时会产生一些问题,比如col水平间距过大,知其所以然才能最终解决问题;当布局时把在行里面添加div:代码如下:  

用bootstrap布局时会产生一些问题,比如col水平间距过大,

知其所以然才能最终解决问题;

当布局时把在行里面添加div:

《bootstrap布局之解决间隔问题》

代码如下:

    

        

       

       

   

哇!其实效果不想这样的,改改吧:

给每个box来一个margin-left:-20px;咋样啦:

《bootstrap布局之解决间隔问题》

看起来还不错呢,但用过margin的会知道,现在的div块已经不居中了,

这样感觉损失了一部分东西去得到另一部分东西,并不很好的策略,

我们得知道间距是怎么造成的,打开开发者工具就能发现

《bootstrap布局之解决间隔问题》

而它的父容器列却有390px

《bootstrap布局之解决间隔问题》

可以看到只要消除了padding,就可以让间距缩小了是吗?
css代码:

[class*=”col-“]{
            padding: 5px;

}
如图:

《bootstrap布局之解决间隔问题》

很完美!


推荐阅读
  • 本文详细介绍了Java集合框架中的Collection体系,包括集合的基本概念及其与数组的区别。同时,深入探讨了Comparable和Comparator接口的区别,并分析了各种集合类的底层数据结构。最后,提供了如何根据需求选择合适的集合类的指导。 ... [详细]
  • Python数据类型6 字典
    字典Python的字典数据类型是基于hash散列算法实现的,采用键值对(key:value)的形式,根据key的值计算value的地址,具有非常快的查取和插入速度。但它是无序的,包 ... [详细]
  • 字节跳动夏季招聘面试经验分享
    本文详细记录了字节跳动夏季招聘的面试经历,涵盖了一、二、三轮面试的技术问题及项目讨论,旨在为准备类似面试的求职者提供参考。 ... [详细]
  • 本文将指导您如何在Docker环境中高效地搜索、下载Redis镜像,并通过指定或不指定配置文件的方式启动Redis容器。同时,还将介绍如何使用redis-cli工具连接到您的Redis实例。 ... [详细]
  • 本文探讨了为何需要进行详尽的需求分析,以及在软件开发过程中常见的需求类型。同时,介绍了几种有效的方法来确保能够准确地捕捉到用户的实际需求。 ... [详细]
  • 前端开发中的代码注释实践与规范
    本文探讨了前端开发过程中代码注释的重要性,不仅有助于个人清晰地回顾自己的编程思路,还能促进团队成员之间的有效沟通。文章将详细介绍HTML、CSS及JavaScript中的注释使用方法,并提出一套实用的注释规范。 ... [详细]
  • 本文介绍了一种通过 jQuery 将视窗单位(如 vh 和 vw)转换为实际像素值的方法,适用于需要动态调整元素尺寸的网页开发。 ... [详细]
  • 深入理解Python中的sorted高阶函数
    排序是编程中常见的需求,无论是简单的数字排序还是复杂的对象排序,其核心都是比较两个元素。本文将探讨如何利用Python的高阶函数`sorted()`,通过自定义键函数来实现灵活多样的排序逻辑。 ... [详细]
  • 2017年人工智能领域的十大里程碑事件回顾
    随着2018年的临近,我们一同回顾过去一年中人工智能领域的重要进展。这一年,无论是政策层面的支持,还是技术上的突破,都显示了人工智能发展的迅猛势头。以下是精选的2017年人工智能领域最具影响力的事件。 ... [详细]
  • 本文深入探讨了CART(分类与回归树)的基本原理及其在随机森林中的应用。重点介绍了CART的分裂准则、防止过拟合的方法、处理样本不平衡的策略以及其在回归问题中的应用。此外,还详细解释了随机森林的构建过程、样本均衡处理、OOB估计及特征重要性的计算。 ... [详细]
  • Eclipse 下 JavaFX 程序开发指南
    本文介绍了 JavaFX,这是一个用于创建富客户端应用程序的 Java 图形和媒体工具包,并详细说明了如何在 Eclipse 环境中配置和开发 JavaFX 应用。 ... [详细]
  • 精通C++并非易事,为何它比其他语言更难掌握?这主要归因于C++的设计理念,即不强迫用户接受特定的编程风格或限制创新思维。本文探讨了如何有效学习C++,并介绍了几本权威的学习资源。 ... [详细]
  • 本文旨在介绍在iOS平台进行直播技术开发前的准备工作,重点讲解AVFoundation框架的基本概念和使用方法。通过对AVFoundation的深入理解,开发者能够更好地掌握直播应用中的音视频处理技巧。 ... [详细]
  • 本文介绍了如何通过自定义配置类,利用 `WebMvcConfigurer` 接口来扩展 Spring MVC 的功能,实现默认首页的自动跳转,同时避免使用 `@EnableWebMvc` 注解全面接管 Spring MVC 的默认配置。 ... [详细]
  • Go 通过 Map/Filter/ForEach 等流式 API 高效处理数据
    go,通过,map,filter,foreach,等,流,式,ap ... [详细]
author-avatar
一粒小小无名砂_741
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有