Bootstrap容器液不是100％

Question

我试图实现以下目标：

• 整行上的背景灰色。
• 中间的背景图片有60％的大小，或者更确切地说我希望这个div只包含60％的中间和内容都在背景本身。

现在的问题是容器的左侧和右侧有空白区域，而不是全宽。我认为它与bootstrap的问题，我尝试谷歌并尝试了很多方式，但仍然没有解决。

希望有人可以帮助我。的由于！

我的演示网站：http://128.199.129.158/

Answer 1

只是为了删除<div class="col-xs-12">，因为它通过删除它从左侧和右侧给出填充，您将从左侧和右侧获得没有空格

Answer 2

我建议你创建这个类：

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

将其添加到示例中的第一个col-xs-12。

.nomargin也可能在不久的将来有用。

此处已经讨论过Remove padding from columns in Bootstrap 3

Answer 3

这就是你追求的吗？的 Fiddle

.pri

Answer 4

修改bootstrap.min.css中的以下内容

.container-fluid
{
 padding-left:0;
 padding-right:0;
}

Answer 5

无需添加col-xs-12 div。

希望这可以解决您的问题。

Answer 6

问题是你使用的是容器 - 流体类，这不是那个目的......当你想要在页面中调整容器大小但是你想要你的背景是全宽时，你应该使用容器，把它放出容器。 您的页面中也可以有多个容器。

解决问题的最简单方法是删除.container-fluid，将你的背景清除出来并在里面定义一个.container。

例：
完整背景菜单
- 菜单的容器
----菜单
滑块背景
- 滑块的容器
----滑块
促销标题背景
- 促销标题的容器
----促销标题