我使用引导程序构建了一个导航面板。我的网站的移动版本有问题。
Here is a sample on codepen。
我试图重建它，但是该项目一直崩溃。
<nav class="navbar navbar-default navbar-fixed-top font">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#up" class="navbar-brand">
<img src="images/logo.jpg" alt="Logo" style="width:100px;">
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#about">O MNIE</a></li>
<li><a href="#work">JAK PRACUJEMY</a></li>
<li><a href="#portfolio">PROJEKTY</a></li>
<li><a href="#contact">KONTAKT</a></li>
<li class="nav-item"><a class="nav-link" href=""><i class="fab fa-facebook mr-1"></i></a></li>
<li class="nav-item"><a class="nav-link" href=""><i class="fab fa-instagram"></i></a> </li>
</ul>
</div>
</div>
对于我来说，解释效果的最简单方法是向您发送照片。
之前：
后
最佳答案
您可以添加第二对社交媒体图标，然后使用@media规则手动隐藏某些宽度的元素。当您真正要做的只是隐藏其中之一时，这将使它们看起来像已经移动了。
这是您的操作方式：
将其添加到导航栏品牌之后的html中：
<div class="collapse-social-icons">
<a class="navbar-brand" href=""><i class="fab fa-facebook"></i></a>
<a class="navbar-brand" href=""><i class="fab fa-instagram"></i></a>
</div>
，并将该类折叠到您要隐藏在小屏幕上的图标上。像这样：
<li class="nav-item collapse-social-icons-dropdown"><a class="nav-link" href=""><i class="fab fa-facebook mr-1"></i></a></li>
然后我将其添加到css：
/* This is to float the social incons to the right */
.collapse-social-icons {
position: relative;
float: right;
margin-right: 10px;
}
/* This is to add the same hover-effect as the other menu items */
.collapse-social-icons a:hover {
background-color: #000000 !important;
color: #ffffff !important;
}
/* This is to hide the "new" set of icons on big screens */
@media only screen and (min-width: 767px) {
.collapse-social-icons {
display:none !important;
}
}
/* This is to hide the "old" set of icons on small screens */
@media only screen and (max-width: 767px) {
.collapse-social-icons-dropdown {
display:none !important;
}
}
当页面的宽度小于767px时，css中的@media规则适用。您可以根据需要进行修改，也可以根据需要指定最大宽度。
在这里查看https://codepen.io/wenzzzel/pen/jXQVNv