css - 如何将社交媒体图标拉到导航栏的右侧?

标签 css twitter-bootstrap navbar font-awesome

我正在使用 Bootstrap ,下面是我的导航栏代码。我已经添加了很棒的字体图标,但我希望将其拉到右边。我似乎无法在不将“主页”、“关于”和“联系方式”乱七八糟的情况下将其向右拉。有什么想法吗?

 <nav class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
     <div id="navbar" class="navbar-collapse collapse">
       <ul class="nav navbar-nav navbar-left">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#contact">Contact</a></li>
         <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i>
         <li><a href="#"><i class="fa fa-twitter fa-lg"></i>
         <li><a href="#"><i class="fa fa-pinterest fa-lg"></i>
           </ul>
         </li>
       </ul>
     </div><!--/.nav-collapse -->
   </div>
 </nav>

最佳答案

Bootstrap 4

导航栏对齐在 Bootstrap 4 中更容易。您只需使用 ml-autonavbar-nav 上用社交图标将它推到右边...

<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
    <div class="container">
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> ☰
        </button>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#" class="nav-link">Home</a>
                </li>
                <li>
                    <a href="#about" class="nav-link">About</a>
                </li>
                <li>
                    <a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
            <ul class="nav navbar-nav ml-auto">
                    <a href="#" class="nav-link"><i class="fa fa-camera-retro fa-lg"></i></a>
                <li>
                    <a href="#" class="nav-link"><i class="fa fa-twitter fa-lg"></i></a>
                <li>
                    <a href="#" class="nav-link"><i class="fa fa-pinterest fa-lg"></i></a>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</nav>

Bootstrap 4 Navbar icons right demo


Bootstrap 3.x(原始答案)

标记有一些错误。乘坐navbar-collapse来自 navbar-header .关闭 <a href>标签正确地在 <li> 内.使用 navbar-right将图标拉到右边。

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li>
                <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li>
            </ul>
        </div>
    </div>
</nav>

工作演示:http://codeply.com/go/zb1PvhcJHs

关于css - 如何将社交媒体图标拉到导航栏的右侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35847359/

相关文章:

javascript - Featherlight 灯箱在页面底部打开

jquery - Bootstrap 药丸/标签和下拉菜单。不幸的婚姻?

html - 缩小页面时不可点击的元素

html - 如何向这个简单的导航栏添加下拉菜单?

jquery - Bootstrap 悬停在导航元素 'div isn' t 显示'?

html - 导航栏背景颜色 css

javascript - 在库中包含 <div></div>

html - 在 HTML 结构中比段落中的文本更靠右的图像 float

html - 如何使用带有 R (rvest) 的 selectorgadget webscrape .dpbox 表?

twitter-bootstrap - bootstrap 4 验证类未显示在输入/反馈元素中