如何将社交媒体图标拉到导航栏的右侧?
How can I pull my social media icons to the right in my navbar?
我正在使用 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>
为什么不这样做呢?制作一个新的导航栏。
<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>
<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>
</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><!--/.nav-collapse -->
</div>
</nav>
Bootstrap 4
导航栏对齐在 Bootstrap 中更容易 4. 您只需在 navbar-nav
上使用 ml-auto
和社交图标将其向右推...
<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-header
中取出 navbar-collapse
。在 <li>
中正确关闭 <a href>
标签。使用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>
我正在使用 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>
为什么不这样做呢?制作一个新的导航栏。
<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>
<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>
</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><!--/.nav-collapse -->
</div>
</nav>
Bootstrap 4
导航栏对齐在 Bootstrap 中更容易 4. 您只需在 navbar-nav
上使用 ml-auto
和社交图标将其向右推...
<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-header
中取出 navbar-collapse
。在 <li>
中正确关闭 <a href>
标签。使用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>