Question

我尝试使用引导程序布局创建页脚网格时未成功。

我希望有人可以帮助我。

以下是我的想法：

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>

Answer 1

Bootstrap每行为您提供12列。 col-xs- *用于媒体电话（＆lt; 768px）。这是理解http://getbootstrap.com/css/#grid和https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system的好教程。根据您的代码LiveOnFiddle，这是一个演示模型示例。这只是一个模型示例。您可以使用大量的CSS技巧来使用媒体查询进行此布局

＆＃13;

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;
  }
  
}

＆＃13;

<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>

＆＃13;

bootstrap页脚网格布局不起作用

1 个答案: