获取带有居中文本的bootstrap导航栏全宽

时间：2017-07-31 07:57:17

标签： html css twitter-bootstrap

我正在创建我的新网站，我想用我的居中文本设置我的导航栏全宽。 一切都很好，但我没有克服设置全宽。

body {
  background-color: #4D4D4D;
}

.navbar-collapse {
  text-align: center;
  background-color: #1B1B1B;
}

.navbar-nav {
  display: inline-block;
  float: none;
}

ul.nav.navbar-nav>li>a {
  color: #C44632;
}

#content {
  width: 70%;
  margin: 0 auto;
  background-color: #2E2E2E;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <nav class="navbar navbar-inverse">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>

    </div>
    <!-- Collection of nav links, forms, and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Matériel <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Optiques</a></li>
            <li class="divider"></li>
            <li><a href="#">Monture</a></li>
            <li class="divider"></li>
            <li><a href="#">Capteurs Photo</a></li>
            <li class="divider"></li>
            <li><a href="#">Accessoires</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Photographies <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Planétaire</a></li>
            <li class="divider"></li>
            <li><a href="#">Ciel Profond</a></li>
            <li class="divider"></li>
            <li><a href="#">Autres</a></li>
          </ul>
        </li>
        <li><a href="#">Article</a></li>
        <li><a href="#">Données Météo</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Qui suis-je ?</a></li>
      </ul>
    </div>
  </nav>
</div>

为了获得全宽导航栏缺少什么？

4 个答案:

答案 0 :(得分：4)

一切都很好，您只需将<div class="container">放在<nav>内。

试试这个：

body {
    background-color: #4D4D4D;
}

.navbar-collapse {
  text-align:center;
  background-color: #1B1B1B;
}

.navbar-nav {
    display:inline-block;
    float:none;
}

ul.nav.navbar-nav > li > a {
    color : #C44632;
}

#content {
    width: 70%;
    margin: 0 auto;
    background-color: #2E2E2E;
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


                <nav class="navbar navbar-inverse">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="container">
                    <div class="navbar-header">
                        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                    </div>
                    <!-- Collection of nav links, forms, and other content for toggling -->
                    <div id="navbarCollapse" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Accueil</a></li>
                            <li class="dropdown">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Matériel <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Optiques</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Monture</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Capteurs Photo</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Accessoires</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Photographies <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Planétaire</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Ciel Profond</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Autres</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Article</a></li>
                            <li><a href="#">Données Météo</a></li>
                            <li><a href="#">Contact</a></li>
                            <li><a href="#">Qui suis-je ?</a></li>
                        </ul>
                    </div>
                </div>
            </nav>

答案 1 :(得分：1)

更改 

<div class="container">

要 

<div class="container-fluid">

和css： 

.container-fluid {
   padding:0;
}

答案 2 :(得分：1)

Bootstrap .container对于中型设备具有固定宽度（1170px），您需要将其设为100%;

PS：添加自定义类来覆盖bootstrap的css是一种很好的做法。 

.custom-container{
  width:100%;
  padding:0;
}

＆＃13;
＆＃13; 
body {
  background-color: #4D4D4D;
}

.custom-container {
  width: 100%;
  padding: 0;
}

.navbar-collapse {
  text-align: center;
  background-color: #1B1B1B;
}

.navbar-nav {
  display: inline-block;
  float: none;
}

ul.nav.navbar-nav>li>a {
  color: #C44632;
}

#content {
  width: 70%;
  margin: 0 auto;
  background-color: #2E2E2E;
}
＆＃13; 
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<style>
  .custom-container {
    width: 100%;
    padding: 0;
  }
</style>

<div class="container custom-container">
  <nav class="navbar navbar-inverse">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
    </div>
    <!-- Collection of nav links, forms, and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Matériel <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Optiques</a></li>
            <li class="divider"></li>
            <li><a href="#">Monture</a></li>
            <li class="divider"></li>
            <li><a href="#">Capteurs Photo</a></li>
            <li class="divider"></li>
            <li><a href="#">Accessoires</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Photographies <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Planétaire</a></li>
            <li class="divider"></li>
            <li><a href="#">Ciel Profond</a></li>
            <li class="divider"></li>
            <li><a href="#">Autres</a></li>
          </ul>
        </li>
        <li><a href="#">Article</a></li>
        <li><a href="#">Données Météo</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Qui suis-je ?</a></li>
      </ul>
    </div>
  </nav>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

最简单的解决方案是将<nav>放在<div class="container">之外，因为<div class="container">拥有自己的样式（填充）

相关问题
最新问题