Question

我正在尝试使用bootstrap 3创建一个页面，我希望页面的最大宽度为800px，这样屏幕上就会有足够大的空白区域。为此，我将所有页面内容包装在主<div>

中

我的问题是，当将800px的最大宽度分配给封装页面内容的主div时，页面上的导航栏和其他容器似乎忽略了这个最大宽度和溢出。

在尝试代码时，我注意到当将max-width增加到1200px时，会实现所需的行为 - 但是，我想尝试以800px而不是1200px来完成此操作。

以下是我的HTML代码：

<!DOCTYPE HTML>
<html>  
  <head>  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   
  </head>
  <body>
  <div id="mainContainer">
    <!-- Navigation bar -->
    <nav class="navbar navbar-inverse" id="mynavbar">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsemenu" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">My Nav</a>
        </div>

        <div class="collapse navbar-collapse" id="collapsemenu">
          <ul class="nav navbar-nav">
            <li><a href="#" id="item1">Item 1</a></li>
            <li><a href="#" id="item2">Item 2</a></li>
            <li><a href="#" id="item3">Item 3</a></li>
            <li><a href="#" id="item4">Item 4</a></li>
            <li><a href="#" id="item5">Item 5</a></li>
            <li><a href="#" id="item6">Item 6</a></li>
            <li><a href="#" id="item7">Item 7</a></li>
            <li><a href="#" id="item8">Item 8</a></li>
            <li><a href="#" id="item9">Item 9</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="row">
        <div id="col1" class="col-md-6">
          <h1>Content Header 1</h1>
          <p id="infoContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>  
        <div id="col2" class="col-md-6">
          <h1>Content Header 2</h1>          
          <h4>Sub Header 1</h4>
          <h4>Sub Header 2</h4>          
        </div>      
      </div>      
    </div>
  </body>
</html>

随附的CSS3代码：

#mainContainer {
  max-width: 800px;
  margin: auto;
}

#col1 {
  background-color: #add8e6;
}

#col2 {
  background-color: #7997A1;
}

/* Allowing the navbar to collapse, at a screen width of 5000px or less */
@media (max-width: 5000px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

CSS文件中媒体查询背后的原因是导航栏始终处于折叠状态（假设没有使用5000px以上的屏幕）。

Answer 1

这是因为bootstrap容器有宽度。

您最好在container中更改width bootstrap.min.css，而不是将div添加到800px。

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

您可以将其更改为您的值800px。

或将max-width: 100%;添加到您的所有child代码中。

Answer 2

查看您的代码，您似乎只想将容器的宽度更改为800px，而不是大屏幕的默认容器1140px。你不需要＆＃34; mainContainer＆＃34;完全是为了这个。

去这里...... https://getbootstrap.com/docs/3.3/customize/#container-sizes

您可以在此处调整容器类大小以及要在引导程序中调整的任何其他元素。您可以按ctrl F搜索＆＃34; container＆＃34;并按住Ctrl键快速在页面上找到它。

输入您想要的任何更改，然后在页面底部下载。您必须阅读有关在您的网站上实施它的信息。

Bootstrap导航栏和容器超出/溢出指定的最大宽度

2 个答案: