内容在页面的左侧和右侧添加了用于页脚目的的包装div后有空格？

我已经添加了包装div以便制作粘性页脚，这项工作已成功完成，但是出现了一个新问题，页面内容移至中心而不是维护在指定位置。空间从左侧和右侧平均出现，您会注意到页面最大化时。内容在页面的左侧和右侧添加了用于页脚目的的包装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>

来源

2016-02-29 Saif

始终在问题本身中发布相关代码。 –

我已经尝试过，但空间仍然存在...尝试最大化工作小提琴，你会看到 – Saif

我真的没有得到你。 –

使用类container-fluid，而不是container在

<div class="container">

来源

2016-02-29 09:08:59 silviagreen

是的，它的工作原理。谢谢 – Saif

为div的整个宽度体内container-fluid，而不是container。

.container和.container-fluid都是响应式的（即它们可以基于屏幕宽度而改变），但是以不同的方式。这是一个常见的误解，认为只有容器流体才有反应。

从功能的角度：

.container-fluid不断调整大小，你的任何款额改变你的窗口/浏览器的宽度，不留多余的空白区域上双方不断，不像.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

来源

2016-02-29 10:45:33

内容在页面的左侧和右侧添加了用于页脚目的的包装div后有空格？

回答

相关问题