Databases
StackOverflow2013
Postsdbo
POBootstrap - Best practices on nesting - rows & spans
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap - Best practices on nesting - rows & spans
    primarykey
    data
    text
    <p><strong>What's the best way to use nesting.</strong></p> <p>Multiple spans inside row - <em>dynamic content</em> : </p> <ul> <li>One row per 12 columns ?</li> <li>OR, One row for ANY number of columns ?</li> </ul> <p><strong>Sample case n°1</strong> - which one is the best &amp; why ? : </p> <pre><code>&lt;div class="row"&gt; &lt;span class="span6"&gt;&lt;/span&gt; &lt;span class="span6"&gt;&lt;/span&gt; &lt;span class="span6"&gt;&lt;/span&gt; &lt;span class="span6"&gt;&lt;/span&gt; &lt;/div&gt; </code></pre> <p><strong>Or</strong> </p> <pre><code>&lt;div class="row"&gt; &lt;div class="span6"&gt;&lt;/div&gt; &lt;div class="span6"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span6"&gt;&lt;/div&gt; &lt;div class="span6"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <hr> <p><strong>Sample case n°2</strong> - More levels to organise the content.</p> <p>Here, use the div "my_margin" to add some margin at left &amp; right - and you must have "first_row" around it. </p> <p><strong>So it's :</strong> row-->span10,offset1-->row-->SPANS</p> <pre><code>&lt;div id="first_row" class="row"&gt; &lt;div id="my_margin" class="span10 offset1"&gt; &lt;div class="row"&gt; &lt;div class="span6"&gt;&lt;/div&gt; &lt;div class="span6"&gt;&lt;/div&gt; &lt;div class="span6"&gt;&lt;/div&gt; &lt;div class="span6"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>Or,</strong></p> <p><strong>You shouldn't use the span10,offset1 but direct margin;</strong></p> <p>In that case, you must create rules for each @Media_size to make it responsive.</p> <pre><code>&lt;div style="margin-right:XYpx; margin-left:XYpx" class="row"&gt; &lt;div class="span6"&gt;&lt;/div&gt; &lt;div class="span6"&gt;&lt;/div&gt; &lt;div class="span6"&gt;&lt;/div&gt; &lt;div class="span6"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>Or - Spans are 'supposed' to be use for your main contents, and then you just play with css. So, something like that :</strong></p> <pre><code>&lt;div row&gt; &lt;div class="span6"&gt; http://jsfiddle.net/JkPhw/ &lt;div class="span6"&gt; &lt;div class="span6"&gt; http://jsfiddle.net/JkPhw/ &lt;div class="span6"&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSlake
    1. USSlake
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBootstrap - Best practices on nesting - rows & spans
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POBootstrap - Best practices on nesting - rows & spans
      1. USAndrea Ligios
      1. VTFavorite
    3. VO
      singulars
      1. POBootstrap - Best practices on nesting - rows & spans
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWon't you get problems when adding left/right-margin to a grid row? Or are you using the fluid grid?
      singulars
      1. POBootstrap - Best practices on nesting - rows & spans
      1. USSimon
    2. COWell yes, it's a bit tricky; For the moment i'm using the first solution in sample 2; But i'm not sure it's the way you are supposed to use Bootstrap spans. In some case i end up with row-->span-->row-->span-->row-->span-->row... wich seems too much, but it's what i need. I wonder if bootstrap spans are originaly supposed to be used to organise the "main" boxes on your page & then you just use normal css to do what you want to do.
      singulars
      1. POBootstrap - Best practices on nesting - rows & spans
      1. USSlake
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload