全长导航栏

时间：2016-04-12 03:16:05

标签： html css twitter-bootstrap

我希望我的导航栏能够跨越整个宽度，就像这样www.ramenchicago.com，但是现在我只能在右边看到它。

我的css设置如下

＆＃13;
＆＃13; 
.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
    width: 100%;
}
.navbar-wrapper .navbar {
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
    background-color: rgba(0,0,0,0.8);
    
}

li {
    border-left: solid 1px white;
}

li:hover {
    background: rgba(0,0,0,0.3);
}

#navbar {
    display: table-row;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
            <div class="container">

                <nav class="navbar navbar-inverse navbar-static-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">
                                <li class="active"><a href="#">HOME</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">LOCATION</a></li>
                                        <li><a href="#">PRESS</a></li>
                                    </ul>
                                </li>
                                <li><a href="#contact">STRINGS 1</a></li>
                                <li><a href="#contact">STRINGS 2</a></li>
                                <li><a href="#contact">HELL RAMEN</a></li>
                                <li><a href="#contact">JOBS</a></li>
                                <li><a href="#contact">DARK CHEFS</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>

            </div>
        </div>
＆＃13;
＆＃13;
＆＃13;

我应该改变我的ul或li吗？请帮帮我！ 此外，这是我第一次使用Bootstrap，所以我还不熟悉它。如何删除下拉菜单上的小箭头？

谢谢！

2 个答案:

答案 0 :(得分：0)

将ul宽度设置为100％

.navbar-nav {
        float: left;
        margin: 0;
        width: 100%;
    }

并且它是li 100％除以li的数量。您有7个li，因此width: 14%;就像这样

.navbar-nav>li {
        float: left;
        text-align: center;
        width: 14%; /* 100 divide by 7 li = 14 */
    }

对于下拉列表中的箭头，只需删除<span class="caret"></span>。

.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
    width: 100%;
}
.navbar-wrapper .navbar {
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
    background-color: rgba(0,0,0,0.8);
    
}

.navbar-nav {
    float: left;
    margin: 0;
    width: 100%;
}

.navbar-nav>li {
    float: left;
    text-align: center;
    width: 14%; /* 100 divide by 7 li = 14 */
}

li {
    border-left: solid 1px white;
}

li:first-child{
   border: 0; 
}

li:hover {
    background: rgba(0,0,0,0.3);
}

#navbar {
    display: table-row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
            <div class="container">

                <nav class="navbar navbar-inverse navbar-static-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">
                                <li class="active"><a href="#">HOME</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">LOCATION</a></li>
                                        <li><a href="#">PRESS</a></li>
                                    </ul>
                                </li>
                                <li><a href="#contact">STRINGS 1</a></li>
                                <li><a href="#contact">STRINGS 2</a></li>
                                <li><a href="#contact">HELL RAMEN</a></li>
                                <li><a href="#contact">JOBS</a></li>
                                <li><a href="#contact">DARK CHEFS</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>

            </div>
        </div>

答案 1 :(得分：0)

您不需要嵌套容器，如果您将显示属性更改为表格格式，您应该会看到您正在寻找的结果。

sudo

*注意：我会将这些放在媒体查询中，这样就不会打扰您的移动导航。

参见工作实例。

浏览器的全宽

＆＃13;
＆＃13; 
.navbar-nav {
  display: table;
  width: 100%;
}
.navbar-nav > li {
  display: table-cell;
  float: none;
}
.navbar-nav > li > a {
  text-align: center;
}
＆＃13; 
@media (min-width: 768px) {
  .navbar-wrapper .container-fluid {
    padding-right: 0;
    padding-left: 0;
    width: 100%;
  }
  .navbar-wrapper .navbar.navbar-inverse .navbar-nav {
    display: table;
    width: 100%;
  }
  .navbar-wrapper .navbar.navbar-inverse .navbar-nav > li {
    display: table-cell;
    float: none;
  }
  .navbar-wrapper .navbar.navbar-inverse .navbar-nav > li > a {
    text-align: center;
  }
}
.navbar-wrapper .navbar {
  background-color: rgba(0, 0, 0, 0.8);
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li {
  border-left: solid 1px white;
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li:hover {
  background: rgba(0, 0, 0, 0.3);
}
＆＃13;
＆＃13;
＆＃13;

替代方案：容器的宽度

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-wrapper">

  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
          <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="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">HOME</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">LOCATION</a>
              </li>
              <li><a href="#">PRESS</a>
              </li>
            </ul>
          </li>
          <li><a href="#contact">STRINGS 1</a>
          </li>
          <li><a href="#contact">STRINGS 2</a>
          </li>
          <li><a href="#contact">HELL RAMEN</a>
          </li>
          <li><a href="#contact">JOBS</a>
          </li>
          <li><a href="#contact">DARK CHEFS</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

</div>
＆＃13; 
@media (min-width: 768px) {
  .navbar-wrapper .navbar.navbar-inverse .navbar-nav {
    display: table;
    width: 100%;
  }
  .navbar-wrapper .navbar.navbar-inverse .navbar-nav > li {
    display: table-cell;
    float: none;
  }
  .navbar-wrapper .navbar.navbar-inverse .navbar-nav > li > a {
    text-align: center;
  }
}
.navbar-wrapper .navbar {
  background-color: rgba(0, 0, 0, 0.8);
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li {
  border-left: solid 1px white;
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li:hover {
  background: rgba(0, 0, 0, 0.3);
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题