我理解,为了阻止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">
你认为这个解决方案是可以接受的吗?