html - 显示与导航内联的图标

Question

我的 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:使用媒体查询将图标的位置设置为相对位置后，我实现了这一点。

我希望图标在右侧，菜单在左侧。

Answer 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>