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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:34:23  来源:igfitidea点击:

Unwanted 1px line on the bottom of a bootstrap navbar and creating a navbar side gap

htmlcsstwitter-bootstrap

提问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;