我做了一个导航栏。我使用了一个自定义脚本在悬停时在列出的菜单链接上显示效果：https://github.com/shadeed/underliner。我设法做到了。。。部分。
当<990像素。
javascript函数在</ul>(我试着把它放在别的地方，但不起作用(。
我的第一个问题是，当页面加载了普通菜单(计算机屏幕菜单(时，它就可以工作了。即使我缩小页面，它仍然有效。当页面加载折叠菜单(<990px屏幕菜单(时，它不起作用。即使我扩展了这个页面，它也不起作用。我的猜测是，当导航栏被折叠时，信息会被数据目标和aria控件调用。在这种情况下，它不会运行javascript下划线函数。
我的第二个问题是，无论我尝试什么，当我在智能手机上显示时，我都无法成功地使折叠的菜单列表居中对齐。(但社会部分正确地居中(但在另一个分区中(
<div class="collapse navbar-collapse" id="navbarSupportedContent1" style="margin-top: 103px;">
<ul class="navbar-nav nav-fill w-100 underliner">
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 100 100">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#c94e37" />
<stop offset="100%" stop-color="#ff6346" />
</linearGradient>
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#c94e37" />
<stop offset="100%" stop-color="#ff6346" />
</linearGradient>
</defs>
</svg>
<li class="nav-item c-nav__item"> <a class="nav-link" href="LINK1.html">LINK1</a> </li>
<li class="nav-item c-nav__item"> <a class="nav-link" href="LINK2.html">LINK2</a> </li>
<li class="nav-item c-nav__item"> <a class="nav-link" href="LINK3.php">LINK3</a> </li>
<script src="js/menu_soulignement.js"></script>
</ul>
<form class="form-inline my-2 my-lg-0" style="align-items: : center">
<div class="container" style=" margin-top: 15px; align-items: : center">
<div class="row justify-content-center" style="vertical-align: middle">
<ul class="social-menu" style="align-content: center">
<li><a href="http://twitter.com/mytwitter" data-toggle="tooltip" data-placement="bottom" title="Suivez-moi @mytwitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true" ></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Aimez-moi #myfacebook" target="_blank"><i class="fa fa-facebook" aria-hidden="true" ></i></a></li>
<li><a href="http://www.instagram.com/myinsta" data-toggle="tooltip" data-placement="bottom" title="Admirez-moi @myinsta" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Épinglez-moi @mypint" target="_blank"><i class="fa fa-pinterest" aria-hidden="true" ></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Regardez-moi #myyoutube" target="_blank"><i class="fa fa-youtube" aria-hidden="true" ></i></a></li>
</ul>
</div>
</div>
</form>
</div>我的第一个问题是它在桌面上工作，而不是在移动中
它将在加载时在桌面上工作，因为您的javascript在svg宽度上添加了每个菜单项的总宽度，但在移动设备上找不到任何项目，所以它将宽度设置为0。
所以解决方案是添加自定义宽度到您的svg，这样问题将解决
如何居中悬停项目
您可以简单地在svg中添加display: block; margin: auto;，它将是一个水平居中的。