A bootstrap Setup horizontal full-width
ROW is sectioned in
12 COLUMNS.
---
And the Page Content layout is usually declared in the corresponding Theme
*.tpl File,
called
style-classes, and then looks like:
Code: Select all
<?php if ($column_left && $column_right) { ?>
<?php $class = 'col-sm-6'; ?>
<?php } elseif ($column_left || $column_right) { ?>
<?php $class = 'col-sm-9'; ?>
<?php } else { ?>
<?php $class = 'col-sm-12'; ?>
<?php } ?>
declaring, in this case, that, if
left and
right colums exist, (usually in large View)
the available
amount of columns in the middle Section will be
6
or, if
only one left or right column exists,
the available amount of columns in the middle Section will be
9
or, if
no left or right column exists,
the available amount of columns in the middle Section will be
12
---
A Category Grid View BOX Class Style Content Line may look like this:
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
meaning, that the BOX uses: (aproximate Values shown!)
3 Columns in Large View Mode (usually >1000px)
col-lg-3 - equals 25% of the available total width = 4 Boxes
3 Columns in Medium Mode (usually >900px)
col-md-3 same as above = 4 Boxes
6 Columns in Small Mode (usually >750px)
col-sm-6 - equals 50% of the available total width = 2 Boxes
12 Columns in X-Small Mode (usually >300px)
col-xs-12 - equals 100% of the available total width = 1 Box
to then present a 'matching' amount of Products.
---
So, if your Box Declaration is set to
col-lg-3 col-md-3
you will be able to place 4 products besides each other, in one Row,
AT LEAST as long, as those Boxes have NO
min-width size/image
Values, and so
breaking the total Row width pixelsize-wise, and then
adding the 4th. Product into the Row below, possibly beeing the only
one there, a well known phenomenon in OC Bootstrap Themes ...
---
Or then such a Solution would also be possible:
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
3 Columns in Large View Mode (usually >1000px)
col-lg-3 - equals 25% of the available total width = 4 Boxes
4 Columns in Medium Mode (usually >900px)
col-md-4 - equals 33.3% of the available total width = 3 Boxes
6 Columns in Small Mode (usually >750px)
col-sm-6 - equals 50% of the available total width = 2 Boxes
12 Columns in X-Small Mode (usually >300px)
col-xs-12 - equals 100% of the available total width = 1 Box
---
Just to give you some ideas on this !
Good Luck!
Ernie
