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

Question

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

我这里有代码

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

你有什么建议吗我怎样才能让它在宽屏幕上说 800px 以及何时将其加载到平板电脑中以成为所有 tablet/smartphone 屏幕的正常宽度？

Answer 1

这可能是执行此操作的最简单方法：您可以在任何媒体查询中使用自定义 class 限制容器大小 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>

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

Navbar remain to the center with my own width in large screen

html

css

navbar

twitter-bootstrap