Question

我想使用全宽div，因此添加了容器流体类，左侧和右侧留下了空白区域。我使用左边和右边的负边距解决了它。但问题是负边缘有助于引导响应性。当我调整左侧时，内容被隐藏，并且在调整大小时有一个水平滚动条。

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

Answer 1

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

Answer 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是您的代码更新的小提琴。

Answer 3

另一种模仿http://www.ichangemycity.com/about-us并使用Bootstraps＆＃34;以内容为中心的方式＆＃34;布局。

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

保持.container使文字内容以视图为中心
将新课程my-full-width添加到<div class="col-md-10 my-full-width>，您希望背景跨越全宽。据我所知，无法更改/添加Bootstraps .row或.col-*类并保持对其宽度和响应行为的控制，并在视。（旁注：它是在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
}

Answer 4

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

＆＃13;

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

＆＃13;

Answer 5

修改CSS中的容器流体类并强制它为0px边距和填充。

.container-fluid {
    margin: 0px !important;
    padding: 0px !important;
}

容器 - 液体留下空白空间

5 个答案: