我使用引导程序构建了一个导航面板。我的网站的移动版本有问题。
我试图重建它,但是项目一直崩溃。
<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>
对于我来说,解释效果的最简单方法是向您发送照片。
之前:
之后
答案 0 :(得分:1)
您可以添加第二对社交媒体图标,然后使用@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>
,然后将类 collapse-social-icons-dropdown 设置为要在小屏幕上隐藏的图标。像这样:
<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规则适用。您可以根据需要进行修改,也可以根据需要指定最大宽度。
查看答案 1 :(得分:0)
似乎您可以将社交图标添加到与移动按钮相邻的另一个div内,并利用d-none d-md-block在移动设备中显示它们并将其隐藏在较大的视图中。您还需要更新CSS以使用Bootstrap 4的CSS库。
<div class="d-flex justify-content-between">
<div class="d-block d-md-none">
<a class="nav-link" href=""><i class="fab fa-facebook mr-1"></i></a>
<a class="nav-link" href=""><i class="fab fa-instagram"></i></a>
</div>
<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>
然后在常规导航中:
<li class="nav-item d-none d-md-block"><a class="nav-link" href=""><i class="fab fa-facebook mr-1"></i></a></li>
<li class="nav-item d-none d-md-block"><a class="nav-link" href=""><i class="fab fa-instagram"></i></a></li>