Блог

Главная - Вопросы по программированию - макет сетки нижнего колонтитула начальной загрузки не работает

макет сетки нижнего колонтитула начальной загрузки не работает

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я безуспешно пытался создать сетку нижнего колонтитула, используя макет начальной загрузки.

Я надеюсь, что кто-нибудь сможет мне помочь.

Вот изображение того, что я имею в виду:

вот изображение того, что я имею в виду

Я пробовал и не могу заставить его работать

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

Комментарии:

1. Полные строки начальной загрузки состоят из 12 столбцов. Ваша нижняя строка равна 14, поэтому она автоматически обернет «маленькую рамку в правом нижнем углу».

Ответ №1:

Загрузочная загрузка каждой строки дает вам 12 столбцов. col-xs- * использовать для мультимедийных телефонов (<768 пикселей). Вот хороший учебник для понимания 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>