为页脚添加 wrap div 后，内容在页面的左侧和右侧有空间吗？答案

【问题标题】：content has space in left and right side of page after adding wrap div for footer purpose?为页脚添加 wrap div 后，内容在页面的左侧和右侧有空间吗？
【发布时间】：2016-02-29 08:52:03
【问题描述】：

我添加了 wrap div 以制作粘性页脚，这项工作成功，但是刚刚出现了一个新问题，页面内容移动到中心而不是保持在指定位置。空间从左侧和右侧平均出现，您会注意到当页面最大化时。

如何去掉左右两边的空格，让wrap div 有全宽？

代码：

 <div id="wrap">
  <nav class="navbar navbar-default navbar-static-top">

  </nav>
<!--*********************body*****************************-->
<div class="container">
<div class="row">
    <div class="col-md-4"></div>

    <div id="map-container" class="col-md-4 div-head"></div>
    <div class="col-md-4"></div>
     </div>
     <br > <br >
      <div  class="col-md-6 div-head">
         <p>


        </p>
     </div>
</div>
  </div><!-- end wrap-->
 <!-- footer div -->
  <div id="footer">
       <div class="container">
         <p>
            <i class="fa fa-copyright"></i>Footer
         </p>
       </div>
    </div>

【问题讨论】：

始终在问题本身中发布相关代码。
我已经尝试过了，但空间仍然存在......尝试最大化工作小提琴，你会看到的
我没有真正理解你。
其实在添加wrapdiv 后body 内容左右对齐空格...我想去掉空格

标签： html css twitter-bootstrap

【解决方案1】：

使用类container-fluid而不是container

<div class="container">

【讨论】：

【解决方案2】：

为 container-fluid 而不是 container 内的 div 的全宽。

.container 和 .container-fluid 都是响应式的（即它们可以根据屏幕宽度进行更改），但方式不同。一种常见的误解是，只有 container-fluid 是响应式的。

从功能角度：

.container-fluid 会随着您对窗口/浏览器宽度的任意更改而不断调整大小，与 .container 的做法不同，不会在两侧留下额外的空白空间。（因此命名：“流体”而不是“数字”、“离散”、“分块”或“量化”）。

.container 以若干特定宽度调整块的大小。换句话说，它将是不同屏幕宽度下的特定又名“固定”宽度。

您可以看到命名混淆是如何产生的。从技术上讲，我们可以说 .container 是“固定宽度”而不是“流体”，因为宽度是给定屏幕宽度范围内的特定值。但当然，“固定”宽度会更改为另一个“固定”宽度值。所以人们可能会觉得 .container 不能改变大小，因此当他们听到（或当你说）.container 是“fixed width”时没有响应。因此，如果您想向新人清楚地传达这一点，您可以这样说，“.container 使其在给定的屏幕宽度范围内固定宽度，但仍然可以响应。”

从基本面来看：

.container-fluid 具有 CSS 属性 width: 100%;，因此它会在每个屏幕宽度粒度上不断重新调整。

.container-fluid {
  width: 100%;
}

.container 有类似"width = 800px" (or em, rem etc.) 的东西，不同屏幕宽度下的特定像素宽度值。这当然是导致当屏幕宽度超过屏幕宽度阈值时元素宽度突然跳转到不同宽度的原因。该阈值由 CSS3 媒体查询控制，它允许您针对不同的条件应用不同的样式，例如屏幕宽度范围。

@media screen and (max-width: 400px){
  .container {
    width: 123px;
  }
}
@media screen and (min-width: 401px) and (max-width: 800px){

  .container {
    width: 456px;
  }
}
@media screen and (min-width: 801px){
  .container {
    width: 789px;
  }
}

超越

您可以通过media queries 使任何固定宽度的元素响应，而不仅仅是.container 元素。其实媒体查询正是.container在后台通过bootstrap实现的方式

【讨论】：