Bootstrap 3 - 全宽色块

我真的想要全宽色块代表我网页的不同部分。Bootstrap 3 - 全宽色块

我使用引导程序3来构建我的网站。该网站位于标准引导程序的容器中，但我希望某些部分是跨浏览器窗口的colouful块。

有谁知道这是如何完成的，可以发表一个例子吗？

来源

2014-09-04 user2478632

查找“CSS”和寻找“背景色” – 2014-09-04 16:23:00

似乎只留下颜色的小方块并没有拉伸整个宽度。 – user2478632 2014-09-04 18:56:52

@ user2475632请提供一个小提琴或链接到你正在工作。 – gigelsmith 2014-09-05 21:15:01

这应该有助于你理解你的问题。 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>

来源

2014-09-08 13:19:25

这是一个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>

来源

2014-09-16 05:11:42 Macsupport

您可以轻松地使用，而不是 '容器' 集装箱液“实现引导全宽彩色部分。
例子：
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>

来源

2014-11-01 20:10:30

你需要做的是把另一个标签内的容器。该标签应该是占用整个页面宽度的CSS背景属性。在这种情况下，我选择了html5“section”标签。下面是一个例子。您可以在此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

来源

2015-01-06 16:34:29

Bootstrap 3 - 全宽色块

回答

相关问题