引導頁腳網格佈局不起作用

我一直嘗試使用引導佈局創建頁腳網格失敗。引導頁腳網格佈局不起作用

我希望有人能幫助我。

這裏是我心目中形象：

here is image of what i have in mind

我都試過，不能讓它的工作

<!--- top row-----> 
<div class="row"> 
<div class="border col-xs-3">box on the right #1</div> 
<div class="border col-xs-3">box on the right #2</div> 
<div class="border col-xs-3">box on the right #3</div> 
<div class="border col-xs-6"> 
<div class="border col-xs-3">small box to the left under box 3</div> 
div class="border col-xs-3">small box to the right under box 3</div> 
</div> 
<div class="border col-xs-3">box on the left #4</div> 
</div> 
<!--bottom row---> 
<div class="row"> 
<div class="border col-xs-3">box on the left</div> 
<div class="border col-xs-8">place for sliding banner</div> 
<div class="border col-xs-3">small box on the bottom right}</div> 
</div>

來源

2016-10-09 Lev Abramovich

引導全行12個列。您的最後一行是14，因此它會自動包裝「右下角的小方塊」。 – ourmandave

引導各行給你12列。 col-xs- *用於媒體手機（< 768px）。這裏是理解http://getbootstrap.com/css/#grid和https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system的好教程。根據你的代碼LiveOnFiddle，這是一個演示模型示例。這只是一個模型的例子。您可以使用大量的CSS技巧使這個佈局與媒體查詢

html,body{ 
 
    max-width:100%; 
 
} 
 

 
.row { 
 
    margin: 5px 
 
} 
 

 
.border { 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    line-height: 1; 
 
} 
 

 
.top-box { 
 
    height: 50px; 
 
} 
 

 
.small { 
 
    width: 36%; 
 
    height: 45px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    line-height: 1; 
 
    margin-top: 28px; 
 
} 
 

 
.slide-banner { 
 
    height: 50px; 
 
} 
 

 
.small-right { 
 
    width: 20%; 
 
    height: 50px; 
 
    margin-top: 5px; 
 
    float: right; 
 
} 
 

 
@media (max-width:535px) { 
 
    .small { 
 
margin-top: 15px; 
 
    } 
 
    
 
}

<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<div class="row"> 
 
    <div class="border col-xs-3">box on the right #1</div> 
 
    <div class="border col-xs-3">box on the right #2</div> 
 
    <div class="border top-box col-xs-3"> 
 
<p> 
 
    box on the right #3 
 
</p> 
 

 
<span class="border small ">small under box3 </span> 
 
<span class="border small ">small under box3</span> 
 
    </div> 
 
    <div class="border col-xs-3">box on the left #4</div> 
 
</div> 
 
<!--bottom row---> 
 
<div class="row"> 
 
    <div class="border col-xs-3">box on the left</div> 
 
    <div class="border slide-banner col-xs-8 col-xs-offset-1">place for sliding banner</div> 
 
    <span class="border small-right">small box bottom right</span> 
 
</div>

來源

2016-10-09 23:20:47

引導頁腳網格佈局不起作用

回答

相關問題