我理解,为了阻止Bootstrap中的主容器位于主体的顶部,并且在导航栏后面,您必须添加填充,如:
<link href="css/bootstrap.css" rel="stylesheet"> <style> body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ } </style> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
填充必须在bootstrap.css和bootstrap-responsive.css之间声明,以便填充不会导致较小设备出现问题,从而破坏站点的响应能力。
我的问题:
我使用combinde bootstrap.css文件从Bootstrap customize下载,它有响应和正常的css组合成一个文件。
因为它们被组合成一个文件,这意味着我不能使用我在这个问题的开头描述的解决方案,而实际上没有添加到bootstrap.css文件(我不想添加它在那里,长的故事) 。
所以我在想,而不是把这段代码(用更小的设备的@media修复):
body { padding-top: 60px; } @media (max-width: 979px) { body { padding-top: 0; } }
进入我自己的css文件(main.css)并包含它之后的bootstrap.css,在html中,像这样:
<link href="css/bootstrap.css" rel="stylesheet" media="screen"> <link href="css/main.css" rel="stylesheet" media="screen">
你认为这个解决方案是可以接受的吗?
解决方法
原文地址:https://www.jb51.cc/bootstrap/234419.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。