bootstrap footer grid layout не работает

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

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

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

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

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

Bootstrap каждая строка даст вам 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

bootstrap footer grid layout не работает

ответ

Смежные вопросы