导航栏在大屏幕中以我自己的宽度保持在中心答案

【问题标题】：Navbar remain to the center with my own width in large screen导航栏在大屏幕中以我自己的宽度保持在中心
【发布时间】：2015-10-10 23:59:16
【问题描述】：

我在一个正在构建的网站中有一个导航栏，它在大屏幕上是全宽的。我正在尝试以我自己的宽度制作大屏幕，但我卡住了。

我这里有代码

.navbar {
    background-color: #242424;
    border-bottom: 1px solid #b9b9b9;
    font-family: 'Poiret One', cursive;
    
}

.navbar a {
    color: #cccccc !important;
}

.navbar a:hover {
    color: #ffffff !important;
    background-color: #646464 !important;
}

.navbar-header .navbar-brand {
    color: white !important;
    font-size: 1.5em;
    
}

<!-- NAVBAR -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="sr-only">Toggle Nav</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>



                </button>


            </div>


            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>


    <!-- END NAVBAR -->

你有什么建议可以让我说宽屏为 800 像素当它在平板电脑中加载为所有平板电脑/智能手机屏幕的正常宽度时？

【问题讨论】：

max-width:800px; margin-left:auto; margin-right: auto;
将属性宽度与 display:inline-block 一起用于自定义宽度
@Jay 它将“联系人”留在与以前相同的位置，但它使导航栏正确。我们如何“联系”跟进导航栏？

标签： html css twitter-bootstrap navbar

【解决方案1】：

这可能是最简单的方法：您可以使用自定义类在任何您想要的媒体查询中限制容器大小 navbar 为 800px，然后只需将自定义 container 颜色调整为navbar 颜色和 navbar 背景颜色，因此它与主体匹配或使用透明。

查看工作示例。

body,
html {
  margin-top: 55px;
}
.navbar.navbar-custom {
  background-color: #242424;
  border-bottom: 1px solid #b9b9b9;
  font-family: 'Poiret One', cursive;
}
.navbar.navbar-custom .navbar-nav li a {
  color: #cccccc;
}
.navbar.navbar-custom .navbar-nav li a:hover {
  color: #ffffff;
  background-color: #646464;
}
.navbar-custom .navbar-header .navbar-brand {
  color: white;
  font-size: 1.5em;
}
@media (min-width: 1200px) {
  .container.container-nav {
    width: 800px;
    background-color: #242424;
  }
  .container.container-content {
    width: 800px;
  }
  .navbar.navbar-custom {
    background-color: transparent;
    border: none;
  }
}

<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
    <div class="container container-nav">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Nav</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button><a class="navbar-brand" href="#">Brand</a>

      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a>

          </li>
          <li><a href="#">Work</a>

          </li>
          <li><a href="#">About</a>

          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">News</a>

          </li>
          <li><a href="#">Blog</a>

          </li>
          <li><a href="#">Contact</a>

          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container container-content">
    <div class="alert alert-warning">Hello</div>
  </div>
</body>

【讨论】：

没问题，很高兴能帮上忙！