Bootstrap 元素 100% 宽度 [英] Bootstrap Element 100% Width

查看：43
本文介绍了Bootstrap 元素 100% 宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建交替的 100% 彩色块.一个理想"的情况被描述为一个附件，以及当前的情况.

所需的设置:

目前:

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

.block {宽度:100%；背景:#fff;}

但是，您可以看到这显然不起作用.它被限制在一个集装箱区域.我试图关闭容器，但也没有用.

解决方案

container 类故意不是 100% 宽度.它是不同的固定宽度，取决于视口的宽度.

如果你想使用整个屏幕宽度，使用 .container-fluid:

引导程序 3:

<div class="container-fluid"><div class="row"><div class="col-lg-6"></div><div class="col-lg-6"></div>

<div class="row"><div class="col-lg-8"></div><div class="col-lg-4"></div>

<div class="row"><div class="col-lg-12"></div>

引导程序 2:

<div class="row"><div class="span6"></div><div class="span6"></div>

<div class="row"><div class="span8"></div><div class="span4"></div>

<div class="row"><div class="span12"></div>

I want to create alternating 100% colored blocks. An "ideal" situation is illustrated as an attachment, as well as the current situation.

Desired setup:

Currently:

My first idea was to create an div class, give it a background color, and give it 100% width.

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

However, you can see that this obviously doesn't work. It's confined to a container area. I tried to close the container and that didn't work either.

解决方案

The container class is intentionally not 100% width. It is different fixed widths depending on the width of the viewport.

If you want to work with the full width of the screen, use .container-fluid:

Bootstrap 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>

Bootstrap 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>

这篇关于Bootstrap 元素 100% 宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆