LINUX.ORG.RU

Bootstrap проблема с сеткой

 ,


0

2

В вебе - новичок. В html при использовании сетки Bootstrap делаю два основных столбца для категорий магазина и фото-товаров в одной строке. Стандартные 12 столбцов на строку, не более. Но правую часть столбцов(col-md-9) с фото все равно заворачивает на следующую, опуская вторую часть столбцов ниже первой на следующую строку. Если убираю один из столбцов в общей строке, доводя общее число до 11, все располагается правильно в одной строке. В чем дело? В коде - все верно, как не смотрю. Лишнего столбца нет... Структура:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 sidebar">
      <h3>Categories</h3>
	  <ul id="list">
            .........
          </ul>
    </div>
    <div class="col-md-9 images"> 
      <div class="row">
        <div class="col-sm-4">
          ...............
        </div>
        <div class="col-sm-4">
          ...............
        </div>
        <div class="col-sm-4">
          ...............
        </div>
      </div> <!-- /.internal row -->
    </div> <!-- /.col-md-9 -->
  </div> <!-- /.external row -->
</div> <!-- /.container-fluid -->


Код нечитабелен, но похоже вы сначала делаете вертикальное разделение (по сетке), а затем в этих дивах (столбцах) пытаетесь строки (row) делать, а надо наоборот - столбцы должны быть "потомками" строк. А вообще - выкладывайте нормальный пример, никто не будет по вашим этим кускам гадать что у вас там не так - куча сервисов есть для обмена и демонстрации html+css, пользуйтесь.

micronekodesu ★★ ()
Ответ на: комментарий от micronekodesu

Теперь код выложил правильно. Вышесказанное знаю. Весь код, как видно, располагается в одной внешней строке (row). Строка делится на два столбца: col-md-3 и col-md-9. В свою очередь, col-md-9 имеет свою вложенную строку с 12 столбцами. Все, вроде, правильно. И примеры такого кода известны. Но проявляется обозначенный выше странный эффект. Как будто один столбец - лишний. Убираю один: например, делаю col-md-2 и col-md-9, или col-md-3 и col-md-8, - и все становится как надо, без оборачивания на следующую строку. Вот что странно...

can ()
Ответ на: комментарий от gruy

Дело было в CSS. Вообще, какие размеры картинок приемлемы в магазине в отношении качества и оптимальной загрузки на разных экранах при разделе категорий слева и картинках(3 шт.) - справа?

can ()