Question

我正在尝试在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>

Answer 1

这是 Working Fiddle

删除container元素

中div内的类nav

还会将margin-right:0px;设置为包含图标的第二个ul。

＆＃13;

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

＆＃13;

在整页模式中查看上述代码段以查看更改

Answer 2

我只需按如下方式创建一个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导航栏的宽度

2 个答案: