Question

正如您在此JSFiddle中所看到的，我使用Bootstrap创建了一个自适应导航菜单。但是，我想知道如何在小设备的右侧显示社交图标，在左侧显示导航按钮。对不起，我是新手，我用谷歌搜索但无法找到解决方案。

您可以看到我想要实现的示例here（顶部的黑色导航菜单。）

以下是HTML代码： -

<nav class="navbar navbar-default navbar-static-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <i class="fa fa-facebook" aria-hidden="true"></i>
        <i class="fa fa-youtube-play" aria-hidden="true"></i>
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <i class="fa fa-google-plus" aria-hidden="true"></i>
        <i class="fa fa-pinterest-p" aria-hidden="true"></i>
        <i class="fa fa-instagram" aria-hidden="true"></i>
        <i class="fa fa-heart" aria-hidden="true"></i>
        <i class="fa fa-tumblr" aria-hidden="true"></i>
        <i class="fa fa-soundcloud" aria-hidden="true"></i>
        <i class="fa fa-vimeo-square" aria-hidden="true"></i>
        <i class="fa fa-linkedin" aria-hidden="true"></i>
        <i class="fa fa-rss" aria-hidden="true"></i>
    </div>
    <div id="navbarCollapse5" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <form>
                <input type="text" name="search" placeholder="Search Text Here...">
                <button><i class="fa fa-search" aria-hidden="true"></i></button>
            </form>
        </ul>
    </div>
</div>

Answer 1

您可以使用css媒体查询。像这样的东西，

@media (min-width: 500px) {
   .cls1 {
     float: left;
   }
}

@media (min-width: 501px) {
   .cls2 {
      float: right;
   }
}

我已更新您的fiddle。

在Bootstrap导航中切换位置

1 个答案: