library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix #249

Browse Source
This commit is contained in:
Jeremy Thomas 2017-04-15 22:13:13 +01:00
parent f04209dda0
commit 6967d789d5
1 changed files with 91 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
docs/documentation/grid/columns.html
View File

@ -597,7 +597,97 @@ doc-subtab: columns
<hr>
<h3 class="title">Multiline</h3>
<h3 id="nesting" class="title">Nesting</h3>
<div class="content">
<p>
You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
</p>
<ul>
<li>
<code>columns</code>: top-level columns container
<ul>
<li>
<code>column</code>
<ul>
<li>
<code>columns</code>: nested columns
<ul>
<li>
<code>column</code> and so on…
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>
The difference with <a href="#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
</p>
</div>
<div class="columns">
<div class="column">
<p class="notification is-info">First column</p>
<div class="columns is-mobile">
<div class="column">
<p class="notification is-info">First nested column</p>
</div>
<div class="column">
<p class="notification is-info">Second nested column</p>
</div>
</div>
</div>
<div class="column">
<p class="notification is-danger">Second column</p>
<div class="columns is-mobile">
<div class="column is-half">
<p class="notification is-danger">50%</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
</div>
</div>
{% highlight html %}
<div class="columns">
<div class="column">
First column
<div class="columns is-mobile">
<div class="column">
First nested column
</div>
<div class="column">
Second nested column
</div>
</div>
</div>
<div class="column">
Second column
<div class="columns is-mobile">
<div class="column is-half">
50%
</div>
<div class="column">
Auto
</div>
<div class="column">
Auto
</div>
</div>
</div>
</div>
{% endhighlight %}
<hr>
<h3 id="multiline" class="title">Multiline</h3>
<div class="content">
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
</div>