Jack L asked 8 years ago
I'm trying to use Boostrap 3's grid layout to position 5 grids (3 interdependent context grids and 2 dependent [on the context] content grids using the same space but on separate tabs). The context grids would sit in the same row as the content grids in the first 2 columns except that 2 grids share column 2 with each having their own row so that they can stack. In fact, the 3 context grids are just single-column lists for selecting values. The third column, of course, holds the content grids. So one context grid in a .col-med-2, two stacked context grids in the next .col-med-2, and the content grids in a .col-med-8.
Unfortunately, the other grids don't appear to honor the Bootstrap layout. I'm including the /lib/js/jqrid/cs/ui.jqgrid.bs.css file after the bootstrap css file. The other grids appear in column 1 as though in their own top-level row. It appears that the display:block in the user agent stylesheet overrides the Bootstrap styling. It will layout properly if I use the float:left style on a containing div (though I can't get the grids in column 2 to stack), but I was hoping to avoid that usage by using the Bootstrap grid.
Abu Ghufran answered 8 years ago
Hi Jack,
I read your query many times …. but still i am not full clear.
If you can email me screenshot, it would help and sample code will ease in regenerating this issue.
email: [email protected]
Paolo L. answered 8 years ago
Your answer suggests that you don't understand the bootstrap layout grid (nothing like your grids, just a layout map) system, despite using it in a limited capacity for your own demos. It's simple. I have 5 grids (2 of which occupy the same space) that I'm trying to position using the bootstrap layout grid (again, an unfortunate collision of names).
<head>
<link rel="stylesheet" type="text/css" media="screen" href="lib/js/themes/redmond/jquery-ui.custom.css"></link>
<link rel="stylesheet" type="text/css" media="screen" href="lib/js/jqgrid/css/ui.jqgrid.css"></link>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="/lib/js/jqgrid/css/ui.jqgrid.bs.css">
<script src="lib/js/jquery.min.js" type="text/javascript"></script>
<script src="lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="lib/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> <!– all bootstrap layouts in a bootstrap container –>
<div class="row"> <!– the master row –>
<div class="col-md-2"> <!– the first column for a context selection list, uses 2/12 of the space –>
<?php echo $out_list1> <!– the master context selector –>
</div>
<div class="col-md-2"> <!– the second column for two sub-context selection lists, stacked; also uses 2/12 of the space –>
<div class="row"> <!– to stack the next two lists, create rows in this column to put them in –>
<div class="col-md-12"> <!– all content must be displayed in a column, take up the entire width (of a 2/12 width column in the larger layout)>
<?php echo $out_list2> <!– the first sub-context selector –>
</div>
</div>
<div class="row"> <!– the second row that will place the next list below the previous list in the same column –>
<div class="col-md-12">
<?php echo $out_list3> <!– the second sub-context selector –>
</div>
</div> <!– second row –>
</div> <!– second column –>
<div class="col-md-8"> <!– the third column, uses 8/12 of the space, for the content for grids 4 and 5 that will eventually be placed in a tabbed panel, but just showing one for now –>
<?php echo $out_list4?>
</div>
</div> <!– master row –>
</div> <!– container –>
</body>
Abu Ghufran answered 8 years ago
Your code generate this output in BS3:
http://prntscr.com/e2tq57
There is a typo, html comment are not closed:
<div class="col-md-12"> <!– all content must be displayed in a column, take up the entire width (of a 2/12 width column in the larger layout)> ////// <————————–
<?php echo $out_list2> <!– the first sub-context selector –>
</div>
