css – Bootstrap Element 100%Width

前端之家收集整理的这篇文章主要介绍了css – Bootstrap Element 100%Width前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想创建交替的100%彩色块。 “理想”情况被示为附件,以及当前情况。

所需设置:

目前:

我的第一个想法是创建一个div类,给它一个背景颜色,并给它100%的宽度。

.block {
    width: 100%;
    background: #fff;
}

然而,你可以看到,这显然不工作。它局限于一个集装箱区域。我试图关闭容器,也没有工作。

解决方法

容器类有意不是100%宽度。它是不同的固定宽度,取决于视口的宽度。

如果要使用屏幕的全宽,请使用.container-fluid:

引导3:

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

引导2:

<body>
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span12"></div>
  </div>
</body>

猜你在找的CSS相关文章