Question

我真的想要全宽色块来表示我网页的不同部分。

我正在使用bootstrap 3来构建我的网站。该网站位于标准引导程序的容器中，但我希望其中一些部分是覆盖整个浏览器窗口的colouful块。

有谁知道这是怎么做的，可以发一个例子吗？

Answer 1

您需要做的是将容器放在另一个标签中。标签应该是占用css背景属性的页面整个宽度的标签。在这种情况下，我选择了html5＆＃34;部分＆＃34;标签。以下是一个例子。您可以查看 jsfiddle

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 - Full width coloured blocks</title>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<style type='text/css'>
    .colored-block {
        width: 100%;
        padding: 30px 0px;
        color: #fff;
    }
    .purple { background: purple; }
    .green { background: green; }
    .blue { background: blue; }
</style>

</head>

<body>
    <section class="colored-block purple">
        <div class="container">
            <h1>Header 1</h1>
            <p>Paragraph content goes here</p>
        </div>
    </section>
    <section class="colored-block green">
        <div class="container">
            <h1>Header 2</h1>
            <p>Paragraph content goes here</p>
        </div>
    </section>
    <section class="colored-block blue">
        <div class="container">
            <h1>Header 3</h1>
            <p>Paragraph content goes here</p>
        </div>
    </section>
</body>
</html>

这是jsfiddle

Answer 2

这可以帮助您了解您的问题。 3部分做成红色，绿色，蓝色。

<div class="row">

        <div class="col-md-4 ">
        <p class=text-danger> red color</p> 
        </div>

        <div class="col-md-4 ">
            <p class=text-success> green color</p>      
        </div>

        <div class="col-md-4 ">
            <p class=text-primary> blue color</p>       
        </div>

</div>

Answer 3

这是一个jsfiddle，3列，全高，背景颜色。

jsfiddle

CSS：

html,body,.container-fluid
{
  height:100%;
}
.container
{
display:table;
width: 100%;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-4, .col-xs-4
 {
display: table-cell;
float: none; 
}

.red{background:red;}

.green{background:green;}

.blue{background:blue;}

HTML

 <div class="container">
 <div class="row">
 <div class="red col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
 <div class="blue col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
 <div class="green col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
 </div>
 </div>

Answer 4

您可以使用'container-fluid'代替'container'轻松地在Bootstrap中实现全宽彩色部分。
例如：
CSS：

.red{background:red;}
.green{background:green;}
.blue{background:blue;}

HTML：

<div class="container-fluid">
    <div class="row">
        <div class="red col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="blue col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="green col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
    </div>
</div>

Bootstrap 3 - 全宽彩色块

4 个答案: