我的 html 标记是:
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav menu">
<li><a href="/">Home</a></li>
<li><a href="blog.html">Features</a></li>
<li><a href="resources.html">Lifestyle</a></li>
<li><a href="contact.html">Travel</a></li>
<li><a href="contact.html">Music</a></li>
<li><a href="contact.html">About</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</nav>
</div>
<!-- navbar-collapse -->
<div class="col-sm-4 navigation" id="social-icons">
<ul class="menu">
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>
<a href=""><i class="fa fa-instagram"></i></a>
<a href=""><i class="fa fa-pinterest"></i></a>
<a href=""><i class="fa fa-heart"></i></a>
<a href=""><i class="fa fa-google-plus"></i></a>
<a href=""><i class="fa fa-tumblr"></i></a>
</ul>
</div>
<!-- social-icons -->
</div><!-- row -->
</div>
<!-- container -->
</nav>
调整窗口大小时,列表堆叠可能是因为我使用了网格系统。
但我想要实现的是响应式菜单(三行)被拉到左边,图标保留在它们的位置。
我正在尝试自学网络开发。任何帮助/建议将不胜感激。
编辑 1: 使用媒体查询将图标的位置设置为相对位置后,我实现了这一点。
我希望图标在右侧,菜单在左侧。
最佳答案
将 position:relative
设置为父 div 然后试试这个
@media (max-width:767px){
#social-icons {
position:absolute;
top:15px; /*or whatever you need*/
}
}
尝试使用代码片段
.navbar-toggle {
background: #000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.navbar-toggle {
background: #000;
float:left;
}
#social-icons {
position: absolute;
top: 15px;
right: 15px;
}
</style>
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav menu">
<li><a href="/">Home</a></li>
<li><a href="blog.html">Features</a></li>
<li><a href="resources.html">Lifestyle</a></li>
<li><a href="contact.html">Travel</a></li>
<li><a href="contact.html">Music</a></li>
<li><a href="contact.html">About</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</nav>
</div>
<!-- navbar-collapse -->
<div class="col-sm-4 navigation" id="social-icons">
<ul class="menu">
<a href=""><i class="fa fa-facebook"></i></a> <a href=""><i class="fa fa-twitter"></i></a> <a href=""><i class="fa fa-instagram"></i></a> <a href=""><i class="fa fa-pinterest"></i></a> <a href=""><i class="fa fa-heart"></i></a> <a href=""><i class="fa fa-google-plus"></i></a> <a href=""><i class="fa fa-tumblr"></i></a>
</ul>
</div>
<!-- social-icons -->
</div>
<!-- container -->
</nav>
<!--/.nav-collapse -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
关于html - 显示与导航内联的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41457737/