twitter-bootstrap bootstrap 导航栏底部不需要的 1px 线并创建导航栏侧间隙
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/23280990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unwanted 1px line on the bottom of a bootstrap navbar and creating a navbar side gap
提问by twilco
1)
1)
So I'm attempting to get my navbar with bootstrap all set up, and unfortunately there appears to be a 1px line at the bottom that I can't seem to get rid of. Can anyone suggest any solutions?
所以我试图用引导程序设置我的导航栏,不幸的是,底部似乎有一条 1px 的线,我似乎无法摆脱。任何人都可以提出任何解决方案吗?
2)
2)
Also, is there a way to get a gap on each side of the navbar, but only if the viewport is above 768px? I'm able to achieve this effect by moving the outside the beginning tag, but like I said I want the navbar to move back up when the website is viewed on a mobile device.
另外,有没有办法在导航栏的每一侧获得间隙,但前提是视口高于 768 像素?我可以通过移动开始标签的外部来实现这种效果,但就像我说的,当在移动设备上查看网站时,我希望导航栏向上移动。
Here's my code:http://pastebin.com/zHP09rNu
这是我的代码:http : //pastebin.com/zHP09rNu
Thanks.
谢谢。
回答by Guy
For the pixel border you need to either set border: 0;or border-color: transparent;on the .navbarelement.
E.g:
对于像素边框,您需要在元素上设置border: 0;或。例如:border-color: transparent;.navbar
.navbar {
background-color: #99ccff;
border: 0;
}
Regarding your second point, you could set the width of the navbar to less than 100% and add a margin either side.
关于第二点,您可以将导航栏的宽度设置为小于 100% 并在两侧添加边距。
Demo available here:http://codepen.io/guyfedwards/pen/CHJAg
此处提供演示:http : //codepen.io/guyfedwards/pen/CHJAg
回答by klewis
If you are rolling with Bootstrap 3.3.6, and using LESS variables, simply set the @navbar-default-border variable to control your navbar border. More on this can be found here - http://getbootstrap.com/customize/#navbar
如果您使用 Bootstrap 3.3.6 并使用 LESS 变量,只需设置 @navbar-default-border 变量来控制您的导航栏边框。可以在此处找到更多相关信息 - http://getbootstrap.com/customize/#navbar
@navbar-default-border:none;

