javascript - Bootstrap Container 和 Container Fluid 有问题

Question

我正在使用 Bootstrap 3.3.7。 我已经使用 和 向页面添加内容。

当我使用 container-fluid 时，它不会跨越页面的内容，但会将大小限制在页面中心区域。

同样的事情发生在我使用容器的时候。它跨越到页面外部> 我的屏幕分辨率是 1366 x 768。

这是我用过的代码

    <div class="container">

      <h4>Bootstrap Buttons</h4>

      <!-- The Large size buttons -->
      <p>
        <button type="button" class="btn btn-default btn-lg">Default</button>
        <button type="button" class="btn btn-primary btn-lg">Primary</button>
        <button type="button" class="btn btn-success btn-lg">Success</button>
        <button type="button" class="btn btn-info btn-lg">Info</button>
        <button type="button" class="btn btn-warning btn-lg">Warning</button>
        <button type="button" class="btn btn-danger btn-lg">Danger</button>
        <button type="button" class="btn btn-link btn-lg">Link</button>
      </p>

      <!-- The default size buttons -->
      <p>
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-link">Link</button>
      </p>

      <!-- The small size buttons -->
      <p>
        <button type="button" class="btn btn-default btn-sm">Default</button>
        <button type="button" class="btn btn-primary btn-sm">Primary</button>
        <button type="button" class="btn btn-success btn-sm">Success</button>
        <button type="button" class="btn btn-info btn-sm">Info</button>
        <button type="button" class="btn btn-warning btn-sm">Warning</button>
        <button type="button" class="btn btn-danger btn-sm">Danger</button>
        <button type="button" class="btn btn-link btn-sm">Link</button>
      </p>

      <!-- The small size buttons -->
      <p>
        <button type="button" class="btn btn-default btn-xs">Default</button>
        <button type="button" class="btn btn-primary btn-xs">Primary</button>
        <button type="button" class="btn btn-success btn-xs">Success</button>
        <button type="button" class="btn btn-info btn-xs">Info</button>
        <button type="button" class="btn btn-warning btn-xs">Warning</button>
        <button type="button" class="btn btn-danger btn-xs">Danger</button>
        <button type="button" class="btn btn-link btn-xs">Link</button>
      </p>  

    <!-- Bootstrap container & container-fluid -->
    <!-- Bootstrap container example -->
    <div class="container bootcontainer">
      <h1>Hello, world! - Using Container</h1>
    </div>

    <!-- Bootstrap container-fluid example -->
    <div class="container-fluid bootcontainerfluid">
      <h1>Hello, world! - Using Container Fluid</h1>

    </div>

Answer 1

这是包含其他容器的容器，因此:

   <!--Bootstrap Modal (Dialog Box / Pop-up Window) Example-->
      <div class="container-fluid">
       ...

然后在任何需要的地方用 container-fluid 替换 container，对我有用。