Jquery 当导航栏折叠时，如何更改图标的位置？_Jquery_Html_Css_Twitter Bootstrap

Jquery 当导航栏折叠时，如何更改图标的位置？

jquery html css twitter-bootstrap

Jquery 当导航栏折叠时，如何更改图标的位置？,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我正在使用一个来自引导的模板。我试图弄清楚，当导航栏被折叠时，你按下图标栏按钮，菜单项列表就会下拉，在我的例子中是工作，关于，联系。但我也有一些社交媒体图标，我想把它们放在右上角，而不是右下角我上传了一些图片，以防更有用。这是网站的布局但是当显示最小化并且菜单折叠时，看起来是这样的但我要做的是让它看起来像这样我尝试过几个想法，虽然很接近，但还不太成熟。我不是很有经验，所以我似乎不知道我错过了什么或做错了什么。如果有人能帮我指出哪里出了问题，我将不胜感激。谢谢你抽出时间 HTML: 这可能

我正在使用一个来自引导的模板。我试图弄清楚，当导航栏被折叠时，你按下图标栏按钮，菜单项列表就会下拉，在我的例子中是工作，关于，联系。但我也有一些社交媒体图标，我想把它们放在右上角，而不是右下角

我上传了一些图片，以防更有用。这是网站的布局

但是当显示最小化并且菜单折叠时，看起来是这样的

但我要做的是让它看起来像这样

我尝试过几个想法，虽然很接近，但还不太成熟。我不是很有经验，所以我似乎不知道我错过了什么或做错了什么。如果有人能帮我指出哪里出了问题，我将不胜感激。谢谢你抽出时间

HTML:

这可能会对你有所帮助或给你一些想法：我把你的图标放在一个

导航栏右边的类中，并调整它们在767px下的位置

.navbar.navbar-default{
背景：#fff；
边界：0px；
}
.navbar.navbar品牌{
字体系列：“开放式Sans”，无衬线；
字体大小：22px；
}
纳瓦尔先生，
李国宝先生，
纳瓦尔先生{
字体系列：“开放式Sans”，无衬线；
字体大小：400；
字体大小：22px；
颜色：#000000；
字号：100；
字母间距：-1px；
}
.navbar.navbar切换{
边界：0px；
}
@介质（最大宽度：767px）{
.navbar-nav.navbar-right{
顶部：-125px；
右：25px；
浮动：对；
位置：相对位置；
}
.navbar-nav.navbar-right>li{
显示：表格单元格；
}
}

切换导航
















烟熏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> 
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" 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>
            <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>
        </div>

        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a></li>
                <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a></li>
                <li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a></li>                
            </ul>
            <div>
                <i><a target="_blank" href="https://twitter.com/PauloPinzonArt" class="fa fa-twitter-square" style="color:#00c7f4; margin-left:.9em; font-size: 1.9em;"></a></i>
                <i><a target="_blank" href="https://instagram.com/paulopinzonart/" class="fa fa-instagram" style="color:#125688; margin-left:.9em; font-size: 1.9em;"></a></i>
                <i><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" class="fa fa-facebook-square" style="color:#3b5197; margin-left:.9em; font-size: 1.9em;"></a></i>
            </div>

        </div>

    </div>
</nav>

</body>
</html>           

.navbar-default{
    background: #fff;
    margin-top:2%;
    border:0px;
}

.navbar-brand
{
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
}

ul, li, a
{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 22px;
    color: #000000;
    font-weight: 100;
    letter-spacing:-1px;
}

.navbar-toggle
{
    border:0px;
}

i
{
float:right;
margin-top: 13px;
}

ul.navbar-nav div i{
    display: inline;
    list-style-type: none;
}

@media only screen and (max-width: 750px) {
    ul,li,a, role{
        width:50%;
    }
}