Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 19:04:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Create links nav

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 12:45:52 +01:00
parent 4ede497c96
commit 0f9d338f66
17 changed files with 1087 additions and 963 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
docs/documentation/columns/nesting.html
View File

@@ -1,79 +1,75 @@
---
title: Nesting columns
subtitle: "A simple way to build <strong>responsive columns</strong>"
layout: documentation
doc-tab: columns
doc-subtab: nesting
breadcrumb:
- home
- documentation
- columns
- columns-nesting
---
{% include subnav/subnav-columns.html %}
<section class="section">
<div class="container">
<h1 class="title">Nesting columns</h1>
<h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
<hr>
<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>
<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>columns</code>: top-level columns container
<code>column</code>
<ul>
<li>
<code>column</code>
<code>columns</code>: nested columns
<ul>
<li>
<code>columns</code>: nested columns
<ul>
<li>
<code>column</code> and so on…
</li>
</ul>
<code>column</code> and so on…
</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>
</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>
<div class="columns">
<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 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>
<p class="bd-notification is-info">First nested column</p>
</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>
<p class="bd-notification is-info">Second nested column</p>
</div>
</div>
<div class="content">
<p>
Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
</p>
</div>
</div>
</section>
<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>
<div class="content">
<p>
Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
</p>
</div>