mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
fe1385327d
* Bring code-example as readable HTML In all other documentation -> column documents there is the source code clearly written, so I missed it in the nested documentation and brought it in. Please verify and thanks for merge 👍 * Added Output of nested_example itself 👍 👍 👍 jgthms for your fast comment! No I can go to bed and sleep well :o) 🌜
83 lines
2.2 KiB
HTML
83 lines
2.2 KiB
HTML
---
|
|
title: Nesting columns
|
|
layout: documentation
|
|
doc-tab: columns
|
|
doc-subtab: nesting
|
|
breadcrumb:
|
|
- home
|
|
- documentation
|
|
- columns
|
|
- columns-nesting
|
|
---
|
|
|
|
<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="{{ site.url }}/documentation/columns/options/#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>
|
|
|
|
{% capture columns_nested_example %}
|
|
<div class="columns">
|
|
<div class="column">
|
|
<p class="bd-notification is-info">First column</p>
|
|
<div class="columns is-mobile">
|
|
<div class="column">
|
|
<p class="bd-notification is-info">First nested column</p>
|
|
</div>
|
|
<div class="column">
|
|
<p class="bd-notification is-info">Second nested column</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<p class="bd-notification is-danger">Second column</p>
|
|
<div class="columns is-mobile">
|
|
<div class="column is-half">
|
|
<p class="bd-notification is-danger">50%</p>
|
|
</div>
|
|
<div class="column">
|
|
<p class="bd-notification is-danger">Auto</p>
|
|
</div>
|
|
<div class="column">
|
|
<p class="bd-notification is-danger">Auto</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{{ columns_nested_example }}
|
|
|
|
<div class="content">
|
|
<p>
|
|
Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="highlight-full">
|
|
{% highlight html %}{{ columns_nested_example }}{% endhighlight %}
|
|
</div>
|