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 - 全寬色塊

回答

相關問題