引导页脚网格布局不起作用

问题描述：

我一直尝试使用引导布局创建页脚网格失败。引导页脚网格布局不起作用

我希望有人能帮助我。

这里是我心目中形象：

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>

引导全行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>

引导页脚网格布局不起作用

相关推荐