html – 从Bootstrap导航栏中删除左侧填充并保持正确的响应行为

html – 从Bootstrap导航栏中删除左侧填充并保持正确的响应行为,第1张

概述我想从下面的导航栏中删除左边距: 和窄视口中的顶部填充: Navbar代码&的jsfiddle: <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li class="active"><a href= 我想从下面的导航栏中删除左边距:

和窄视口中的顶部填充:

Navbar代码&的Jsfiddle:

<nav  role="navigation">  <div >    <ul >      <li ><a href="#">About</a></li>      <li><a href="#">Events</a></li>      <li><a href="#">News</a></li>      <li><a href="#">discuss</a></li>    </ul>  </div></nav>

https://jsfiddle.net/wx6bx3pr/

已尝试的解决方案 – 将.container-fluID的填充设置为零可在宽视口中获得所需的结果:

.container-fluID{  padding: 0;}

除了在狭窄的视口中完全断开它,活动菜单项突出到导航栏之外,容器和菜单项文本之间没有间距:

如何在不破坏窄视口的情况下获得所需的解决方案?

非常感谢.

解决方法 像这样尝试导航栏上的负边距..

@media (min-wIDth: 768px) {  .navbar-nav {    float: left;    margin: 0;    margin-left: -15px;  }}.navbar-nav {    margin: 0 -15px;}

http://codeply.com/go/leAaYlOaYd

总结

以上是内存溢出为你收集整理的html – 从Bootstrap导航栏中删除左侧填充并保持正确的响应行为全部内容,希望文章能够帮你解决html – 从Bootstrap导航栏中删除左侧填充并保持正确的响应行为所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1083128.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-27
下一篇2022-05-27

发表评论

登录后才能评论

评论列表(0条)

    保存