容器流体留下空白空间

Posted 2023-02-24

【中文标题】容器流体留下空白空间

【英文标题】：container-fluid leaving blank space

【发布时间】：2016-04-22 01:23:38

【问题描述】：

我想使用全宽 div，所以添加了 container-fluid 类，它在左侧和右侧留下空白空间。我使用左右负边距解决了它。但问题是负边距会影响引导响应的性质。当我调整大小时，左侧内容被隐藏并且调整大小时有一个水平滚动条。

<div class="container-fluid">
<div class="row" style="background-color:gainsboro">
 <div class="col-md-10">
 </div>
 </div>
 </div>

【问题讨论】：

你能展示更多你的代码吗？您提供的代码不会重现问题。 jsfiddle.net/txo2b4pj

这是我的代码。我只在调整大小时遇到​​问题jsfiddle.net/txo2b4pj/1 我想实现这个：ichangemycity.com/about-us

所以基本上你不想拥有container-fluid 提供的一点点填充？

是的。我想实现这一点：ichangemycity.com/about-us。当我添加容器流体时，内容在适当的位置，但我只想扩展那个灰色背景

【参考方案1】：

将overflow:hidden 添加到您的容器中。

【讨论】：

我做了，但是在调整大小时会出现横向滚动条，并且由于负边距而看不到一半内容

尽量不要在容器上使用负边距，而是覆盖容器流体。容器流体填充左：0；填充权：0；

但它会影响我的其余页面吗？

如果您将再次使用 container-fluid 类。所以最好在你的主容器上放另一个类。 然后在你的css中。 .wrapper padding-left:0;填充权：0；

我做了，但左右两边还是有空格。

【参考方案2】：

您遇到的填充问题是您调用的类的结果。 col-md 系列和 container-fluid 都是开箱即用的

padding-left: 15px;
padding-right: 15px;

对于每边的 30px 填充组合。修复内容被剪辑的最简单方法是创建自己的类以包含

.container-margin 
    margin-left: -15px;
    margin-right: -15px;

row 类负责 -15px，其余部分由上面负责。这样一来，如果您再次选择使用 container-fluid，您将不会得到相同的结果。

Here 是你的代码更新的小提琴。

【讨论】：

谢谢 .. 但是看到这个：在调整大小时会发生这种情况snag.gy/mFeDZ.jpg 隐藏了一些内容

这种情况只发生在较小的分辨率上，还是一直发生？

好的，检查小提琴链接 - 我更新了代码以更好地响应您的需求。如果max-width: 479px 的边距有点偏，在获得所需结果之前不要害羞。

【参考方案3】：

另一种模仿http://www.ichangemycity.com/about-us 并使用引导程序“以内容为中心”布局的方式。

这里的JSFiddle：https://jsfiddle.net/osserpse/9L3g1ezw/4/

保持.container 使文本内容以视图为中心 添加一个新类，my-full-widthto <div class="col-md-10 my-full-width>，您希望背景跨越整个宽度。据我所知，不可能更改/添加 Bootstraps .row 或 .col-* 类并保留对其宽度和响应行为的控制，并在 viewport 的全宽上创建背景。 （旁注：在 Bootstrap 项目中确定自定义类的范围是最佳实践，因此可以非常简单地发现哪些类是 Bootstrap 原生的，哪些是特定于项目的；在我的示例中，我使用 .my-*

CSS：

.my-full-width::after 
  content: "";
  background-color: aliceblue;
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -100%;
  left: -100%;
  z-index: 0

// Add elements and classes here
h1, p 
  position: relative;
  z-index: 1; //to make elements to render above the background

【参考方案4】：

您可以使用 Bootstrap 实用程序类 m-0 删除不需要的边距。

<div class="container-fluid m-0">
    <div class="row" style="background-color:gainsboro">
        <div class="col-md-10">
        </div>
    </div>
</div>

【参考方案5】：

我在这种情况下所做的只是应用以下样式并且没有填充或水平滚动条，也适用于小型设备。

.container-fluid
  padding-left: 0rem;
  padding-right: 0rem;
  overflow: hidden;