Html 引导3-全宽彩色块_Html_Css_Twitter Bootstrap

Html 引导3-全宽彩色块

html css twitter-bootstrap

Html 引导3-全宽彩色块,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我真的希望全幅色块代表我的网页的不同部分我正在使用Bootstrap3建立我的网站。该网站位于标准引导程序的容器中，但我希望其中一些部分是跨整个浏览器窗口的colouful块有人知道这是怎么做到的吗？请发一个例子？这会帮助你理解你的问题。3个部分，如红色、绿色、蓝色 <div class="row"> <div class="col-md-4 "> <p class=text-danger> red color</p

我真的希望全幅色块代表我的网页的不同部分

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

有人知道这是怎么做到的吗？请发一个例子？

这会帮助你理解你的问题。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>

这是一个JSFIDLE，3列，带背景色的全高

CSS:

HTML

通过使用“容器流体”而不是“容器”，可以很容易地在引导中实现全宽度彩色部分。例子： CSS:

HTML:

您需要做的是将容器放置在另一个标记中。标签应该是使用css背景属性占据整个页面宽度的标签。在本例中，我选择了html5节标记。下面是一个例子。你可以看看这个

这里是一个

查找“CSS”和“background-color”，它似乎只留下一小块颜色，并没有延伸到整个宽度。@user2475632请提供一个小提琴或链接到您正在处理的内容。

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;}

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

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

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

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