Question

我在一个网站中有一个导航栏，即大屏幕中的全宽度。我试图用自己的宽度制作大屏幕并且卡住了。

我的代码在这里

＆＃13;

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

＆＃13;

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

＆＃13;

你有什么建议我怎么能让它说800px用于宽屏幕当它装入平板电脑到所有平板电脑/智能手机屏幕的正常宽度时？

Answer 1

这可能是执行此操作的最简单方法：您可以使用自定义类限制容器大小，无论您希望navbar为800px的媒体查询，只需调整自定义{{1} }颜色为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;
  }
}

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

1 个答案: