Столбцы загрузочной сетки перекрываются друг с другом

Ответ 1

Синтаксис вашей сетки неверен: ваш первый разделитель строк имеет col-md-6, col-md-6, col-md-9 и col-md-3 как дети. Система сетки Bootstrap имеет 12 столбцов, а не 24.

Возможно, попробуйте что-то вроде этого (завернутые col-md-9 и col-md-3 в новую строку div):

<div class="container">

    <div class="row">
        <div class="col-md-6">
            <img src="content/one.png">
        </div>

        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6"><img src="content/two.png"></div>
                <div class="col-md-6"><img src="content/three.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/four.png"></div>
                <div class="col-md-6"><img src="content/five.png"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3"><img src="content/six.png"></div>
                <div class="col-md-9"><img src="content/seven.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/eight.png"></div>
                <div class="col-md-6"><img src="content/nine.png"></div>
            </div>
        </div>
        <div class="col-md-3">
            <img src="content/ten.png">
        </div>
    </div>

</div>

Ответ 2

Я использовал синтаксис сетки на ясном bootply, удалил изображения и, похоже, работает нормально. Вы не сделали jsfiddle или bootply, так что вам не удалось помочь вам дальше. Вот как выглядит ваша сетка только с текстом:

Пример загрузки

Попробуйте добавить класс img-responseive ко всем изображениям внутри столбцов, чтобы предотвратить их переполнение столбцов, в которых они находятся.

Ответ 3

Если вы пытаетесь создать сетку 16x16, ваши вложенные ширины столбцов будут неправильными:

Начните с просмотра этого раздела:

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-3"><img src="content/six.png"></div>
            <div class="col-md-9"><img src="content/seven.png"></div>
        </div>

Вы вставляете столбец 1/4 (3/12) в столбце 3/4 (9/12). Чтобы определить конечную ширину столбца, умножьте их вместе и получите 3/16. Вам действительно нужна колонка 1/4 (4/16). Чтобы исправить это, вам нужно разделить эту секцию (3/4) на третьи вместо четверти (4/12 = 1/3 и 8/12 = 2/3):

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-4"><img src="content/six.png"></div>
            <div class="col-md-8"><img src="content/seven.png"></div>
        </div>

Чтобы сделать проблему более очевидной, добавьте цвет фона в ячейку, содержащую seven.png. Вы увидите, что цвет заполнит пустое пространство, чтобы на самом деле была ячейка. Изображение слишком узкое, чтобы сделать его очевидным.

То же самое исправление необходимо для нижней половины этого раздела:

        <div class="row">
            <div class="col-md-6"><img src="content/eight.png"></div>
            <div class="col-md-6"><img src="content/nine.png"></div>
        </div>
    </div>

Теперь вы берете столбец 3/4 и разделяете его на 1/2 (снова умножая), вы создаете столбец 3/8 (6/16) слева, где вы хотите 1/2 (8/16th) и столбец 3/8 (6/16) справа, где вы хотите 1/4 (4/16) и другое. Опять же, исправление состоит в том, чтобы разделить баланс на трети:

        <div class="row">
            <div class="col-md-8"><img src="content/eight.png"></div>
            <div class="col-md-4"><img src="content/nine.png"></div>
        </div>
    </div>

И снова, если вы поместите фоновый цвет за nine.png, вы увидите, что он заполняет пробелы.