图标不适合Bootstrap navbar的宽度

我正在试图在Bootstrap中包含导航栏右侧的图标。通过此代码，图标会溢出导航栏的宽度。如何将图标格式设置为右对齐，但仅与导航栏一样宽？图标不适合Bootstrap navbar的宽度

<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>

来源

2016-04-06 victoria

我只想创造一个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>

来源

2016-04-06 10:56:32 Sphinx

这里是一个Working Fiddle

删除这是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>

查看上面的代码中全页模式看到的变化

来源

2016-04-06 10:51:39

图标不适合Bootstrap navbar的宽度

回答

相关问题