позиционирование DIV-х в Bootstrap сетки

Я пытаюсь архивировать что-то вроде этого, используя Bootstrap:позиционирование DIV-х в Bootstrap сетки

expected result

, и я получаю вместо этого:

current result

Это мой HTML:

<div id="layout" class="container"> 
    <div class="row col-md-12"> 
     <div class="col-md-6" style="min-height: 100px;border: 1px white solid;background-color: #4986e7;"></div> 
     <div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div> 
    </div> 
    <div class="row col-md-12"> 
     <div class="col-md-offset-6 col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div> 
    </div> 
    <div class="row col-md-12"> 
     <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #f83a22;"></div> 
     <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #fa573c;"></div> 
     <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #f83a22;"></div> 
     <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #fa573c;"></div> 
     <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #ffad46;"></div> 
     <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: purple;"></div> 
    </div> 
</div>

мой CS S:

.row { 
    background-color: transparent; 
    border: 0; 
}

Я попытался изменить поля и отступы в Див-х годов, имеют встроенные стили, а также в отдельную таблицу стилей, цв-LG- , цв-SM-, но я получаю тот же результат , Может ли кто-то указать мне правильное направление, где я должен начать искать это?

JSFiddle

Спасибо.

источник

2014-11-10 vidriduch

<div class="row col-md-12"> - заставит каждый вложенный элемент, чтобы быть внутри него.

Поэтому, когда вы добавляете еще одну строку, которая хочет иметь предыдущую строку (вторая зеленая), вы не хотите иметь ее в новом row - вместо этого позвольте ей поделиться той же самой строкой, удалить ее смещение, и это будет отлично!

<div id="layout" class="container"> 
    <div class="row col-md-12"> 
     <div class="col-md-6" style="float: left; min-height: 100px;border: 1px white solid;background-color: #4986e7;"></div> 
     <div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div> 
     <div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div></div> 
    <div class="row col-md-12"> 

    </div> 
    <div class="row col-md-12"> 
     <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #f83a22;"></div> 
     <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #fa573c;"></div> 
     <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #f83a22;"></div> 
     <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #fa573c;"></div> 
     <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #ffad46;"></div> 
     <div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: purple;"></div> 
    </div> 
</div>

enter image description here

http://jsfiddle.net/qfoLe5vu/21/

источник

2014-11-10 16:09:30 docodemore

благодарим вас за разъяснение – vidriduch

Добро пожаловать :) – docodemore

Эй, я думаю, вы просто хотите вложить эту вторую зеленую колонку внутри первой строки col-md-12 вместо того, чтобы иметь ее в своей собственной. Так же, как это:

<div class="row col-md-12"> 
    <div class="col-md-6" style="min-height: 100px;border: 1px white solid;background-color: #4986e7;"></div> 
    <div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div> 
    <div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div> 
</div>

Проверьте мою модификацию на свой скрипку

http://jsfiddle.net/qfoLe5vu/8/

источник

2014-11-10 16:01:13

+1 спасибо. он работает, но @docodemore объяснил это немного лучше. – vidriduch

Вам нужно убедиться, что он понимает, что первая зеленая клетка становится слишком высокой: http://jsfiddle.net/qfoLe5vu/25/. –

Да, спасибо Райан. Это является следствием конкретной конструкции строк и таблиц. Я предлагаю вам поделиться этим комментарием с принятым ответом выше. –

Here is my HTML 
<div class="container" id="layout"> 
    <div class="row col-md-12"> 
     <div style="min-height: 100px; border: 1px solid white; background-color: rgb(73, 134, 231); width: 50%; float: left;" class="col-md-6"></div> 
     <div style="min-height: 50px; border: 1px solid white; background-color: rgb(22, 167, 101); width: 50%; float: left;" class="col-md-6"></div> 

     <div style="min-height: 50px; border: 1px solid white; background-color: rgb(22, 167, 101); width: 50%; float: left;" class="col-md-6"></div> 
    </div> 
    <div class="row col-md-12"> 
     <div style="min-height: 50px;border: 1px white solid;background-color: #f83a22;" class="col-md-2"></div> 
     <div style="min-height: 50px;border: 1px white solid;background-color: #fa573c;" class="col-md-2"></div> 
     <div style="min-height: 50px;border: 1px white solid;background-color: #f83a22;" class="col-md-2"></div> 
     <div style="min-height: 50px;border: 1px white solid;background-color: #fa573c;" class="col-md-2"></div> 
     <div style="min-height: 50px;border: 1px white solid;background-color: #ffad46;" class="col-md-2"></div> 
     <div style="min-height: 50px;border: 1px white solid;background-color: purple;" class="col-md-2"></div> 
    </div> 
</div>

FIDDLE

источник

2014-11-10 16:17:30 sasi

позиционирование DIV-х в Bootstrap сетки

ответ

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