Question

我在container-class-div中有一个导航栏，因为我希望在桌面视图中导航不会触及显示器的边缘，但在移动视图中它应该伸展到两侧。

我尝试了两个容器，一个作为容器，另一个作为容器流体，并使用hidden-xx类消失，但这不起作用。

任何人都有想法如何解决这个问题？

Answer 1

您可以根据屏幕尺寸使用container，其margin更改，因为它设置为auto。

＆＃13;

.navbar-nav {
  display:flex;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-default">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

<div class="container">
  <h3>Heading</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

＆＃13;

Answer 2

撰写媒体查询。

对于屏幕＆gt; 920px

.container{
    padding:0 10px 0 10px;
}

对于屏幕＆lt; = 920px

@media screen and (max-width: 920px) {
    .container {
        padding:0;
    }
}

导航栏和容器

2 个答案: