圖標不適合Bootstrap導航欄的寬度
[英]Icons not fitting in the width of Bootstrap navbar
問題描述
我正在嘗試在Bootstrap中制作一個導航欄，該導航欄在導航欄的右側包括圖標。 使用此代碼，圖標溢出到導航欄的寬度之外。 我如何格式化圖標以使其右對齊但僅與導航欄一樣寬？
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<ul class="nav navbar-nav navbar-right social">
<li><a href="#"><i class="fa fa-linkedin-square fa-lg"></i></a></li>
<li><a href="#"><i class="fa fa-github-square fa-lg"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus-square fa-lg"></i></a></li>
</nav>
</div>
2 個解決方案
解決方案1
3 2016-04-06 10:51:39
這是一個工作小提琴
刪除nav元素內的div中的類container
還設置了margin-right:0px; 到包含圖標的第二個ul 。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="container"> <nav class="navbar navbar-default"> <div class=""> <ul class="nav navbar-nav"> <li><a href="#">ABOUT</a></li> <li><a href="#">PORTFOLIO</a></li> <li><a href="#">CONTACT</a></li> </ul> <ul class="nav navbar-nav navbar-right social" style="margin-right:0px;"> <li><a href="#"><i class="fa fa-linkedin-square fa-lg"></i></a></li> <li><a href="#"><i class="fa fa-github-square fa-lg"></i></a></li> <li><a href="#"><i class="fa fa-google-plus-square fa-lg"></i></a></li> </nav> </div>
在整頁模式下查看以上代碼片段以查看更改
解決方案2
2 已采納 2016-04-06 10:56:32
我將按照如下方式創建一個CSS，並將其添加到容器div中
.nopadding { padding: 0 !important; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="container nopadding"> <nav class="navbar navbar-default"> <div class="container"> <ul class="nav navbar-nav"> <li><a href="#">ABOUT</a></li> <li><a href="#">PORTFOLIO</a></li> <li><a href="#">CONTACT</a></li> </ul> <ul class="nav navbar-nav navbar-right social"> <li><a href="#"><i class="fa fa-linkedin-square fa-lg"></i></a></li> <li><a href="#"><i class="fa fa-github-square fa-lg"></i></a></li> <li><a href="#"><i class="fa fa-google-plus-square fa-lg"></i></a></li> </ul></div> </nav> </div>
Bootstrap徽標不適合導航欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.