[英]Creating a row that spans the width of the screen using bootstrap
我正在嘗試創建一種與此布局相似的布局，其中不同的部分跨越屏幕的整個寬度。 我正在查看html / css的布局，卻無法弄清楚為什么我的視圖沒有做同樣的事情。 （我是剛創建頁面的新手）。
我正在使用php來簡化頁面的創建過程，因此我有一些文件。
.jumbotron{ background: gray; height: 50%; margin-top: 10px; } .jumbotron p, h1 { text-align: center; } .nav { text-align: center; padding: 0; margin: 0; background-color: red; height: 10%; } .nav li { display: inline-block; margin-right: 5%; margin-left: 5%; } .container #about { background: blue; height: 50%; } .container #me { background: blue; height: 50%; }
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <link href="dist3/css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <ul class="nav"> <li><a href="index.php">Home</li> <li><a href="about.php">About</li> <li><a href="contact.php">Contact</li> </ul><!--END .nav--> </div><!--END .wrapper--> </div><!--END .header--> <div class="container"> <div class="jumbotron"> <div class="container"> <h1>Example</h1> <p>Example paragraph </p> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <div id="about"> <span class="name">ABOUT</span> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <div id="more"> <span class="name">MORE</span> </div> </div> </div> </div> </div> <!--END MAIN CONTAINER--> </body> </html>
這些行不會延伸到屏幕的邊緣。 視圖也未對齊。 我知道要看的東西很多，但是我無法在線找到任何帶有示例或簡單模板供我參考的資源。
在Bootstrap中，您可以將12列網格放置在.container或.container-fluid 。 如果要使網格最大跨度為1170像素，則使用第一個像素；如果希望跨整個屏幕，則使用第一個像素。 兩者的每邊都具有15像素的水平填充，以使其內容與屏幕邊緣保持一定距離。 對於文本來說，這是一件好事，但是，如您所注意到的，如果背景色或圖像確實覆蓋了整個寬度，那就很好了。
如果您查看鏈接的主題（請參閱http://ironsummitmedia.github.io/startbootstrap-freelancer/ ），您可能會注意到，它們使用的.container和.container-fluid類也不會跨越整個寬度屏幕的 它們被其他元素包圍，例如<section class="success" id="about"> ，並在其上放置了背景色。
請參見以下示例，其中我在容器周圍放置了帶有.pink或.green背景色的<section> ：
.pink { background-color: #f99; } .green { background-color: #9f9; } section { padding-bottom: 20px; }
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <section class="pink"> <div class="container-fluid"> <div class="row"> <div class="col-xs-12"><h3>.container-fluid</h3></div> </div> <div class="row"> <div class="col-xs-6">Column one</div> <div class="col-xs-6">Column one</div> </div> </div> </section> <section class="green"> <div class="container"> <div class="row"> <div class="col-xs-12"><h3>.container</h3></div> </div> <div class="row"> <div class="col-xs-6">Column one</div> <div class="col-xs-6">Column one</div> </div> </div> </section>
在你的榜樣PS的<a>標簽不與封閉</a>標簽，再加上.container后.jumbotron未關閉。
擴展行的問題很簡單，添加以下規則：
body {
margin: 0;
}
Zend Form + Twitter引導程序：創建2個跨度以顯示相同的表單
[英]Zend Form + Twitter bootstrap: creating 2 spans to show the same form
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.