bootstrap如何设置行间距

bootstrap如何设置行间距

比如现在如下的基于 Bootstrap 框架布局的HTML代码,需要在每行之间的上边添加间距(padding或者margin),有哪些方法可以实现呢?

        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    

登录后复制

相关推荐:《bootstrap入门教程》

方案一

添加一个新的样式类,定义 margin-top 的样式,如:

.top-buffer { margin-top:20px; }

登录后复制

然后,在row所在的div元素上添加该样式类,如:

 ...

登录后复制

方案二

定义一些通用的上边距样式类,如:

.top5 { margin-top:5px; }.top7 { margin-top:7px; }.top10 { margin-top:10px; }.top15 { margin-top:15px; }.top17 { margin-top:17px; }.top30 { margin-top:30px; }

登录后复制

然后,在row所在的div元素上添加适合的CSS样式类,如:

登录后复制登录后复制

方案三

在 Bootstrap 4 中,可以使用内置的间距样式类(具体请见这里),如:

登录后复制登录后复制

以上就是bootstrap如何设置行间距的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3003125.html

(0)
上一篇 2025年3月13日 00:31:31
下一篇 2025年3月13日 00:31:40

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何使用bootstrap快速实现登录页面

    首先访问https://v3.bootcss.com/getting-started/#download下载bootstrap。 下载后解压,目录如下,很简洁: 相关推荐:《bootstrap入门教程》 下面就开始编写登录页面,如图,主要就…

    2025年3月13日 编程技术
    200
  • bootstrap如何制作下拉菜单

    首先要在Sublime Text中新建HTML页面,如下图所示,一定注意编码选择utf-8。 然后,我们运用link标签导入bootstrap的样式库,如下图所示: 由于点击下拉菜单的效果需要脚本实现,所以需要导入jquery和bootst…

    2025年3月13日 编程技术
    200
  • 如何用bootstrap定义上弹菜单

    有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出。在bootstrap框架中专门为这种效果提代了一个类名“dropup”。使用方法正如前面所示,只需要在“b…

    2025年3月13日
    200
  • bootstrap的下拉多选框如何使用

    使用bootstrap-select组件时,先引用下列文件 最后一个文件 defaults-zh_CN.min.js 非必需,是组件中文化的时候才需要引用。 登录后复制 使用就更加简单了,不用任何已经js,直接使用class就可以初始化。 …

    2025年3月13日 编程技术
    200
  • 如何利用bootstrap分页

    下载bootstrap然后解压到本地电脑目录,新建一个test目录用来存放测试文件。 新建一个测试的pagination.html文件。 nbsp;html> Bootstrap 分页测试   登录后复制«12345» 相关推荐:《b…

    2025年3月13日 编程技术
    200
  • bootstrap如何响应式布局

     bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。 在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。(推荐学习:Bootstrap视频教程) Boo…

    2025年3月13日
    200
  • 如何使用bootstrap实现年月日的时间选择

    下面介绍如何使用bootstrap实现年月日的时间选择。 使用bootstrap实现时间选择,页面需要加载以下文件:(推荐学习:Bootstrap视频教程) 1、CSS文件:bootstrap.min.css、bootstrap-datet…

    2025年3月13日
    200
  • bootstrap如何学习

    我以前也是通过看一些视频教程来学的,比如慕课网上的,比如51cto上的那些零基础入门bootstrap什么的,还有一些培训班里流传出来的,感觉晕乎乎的,不知所云。 还是在后面不断使用的过程中慢慢体会到它的价值。相信很多没有什么基础的初学者学…

    2025年3月13日
    200
  • bootstrap如何让图片居中显示

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中显示。 一般情况下,我们的图片都使用了.img-responsive 类来实现图片响应式。(推荐学习:Bootstrap视频教程) 如果需要实现响应式图片水平居中,那…

    2025年3月13日
    200
  • bootstrap插件有哪些

    bootstrap自带12 jquery插件,扩展了功能,可以给站点添加更多的互动。即使您不是一名高级的 javascript 开发人员,您也可以着手学习 bootstrap 的 javascript 插件。 利用 Bootstrap 数据…

    2025年3月13日
    200

发表回复

登录后才能评论