nesting.html 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. ---
  2. title: Nesting columns
  3. layout: documentation
  4. doc-tab: columns
  5. doc-subtab: nesting
  6. ---
  7. {% include subnav-columns.html %}
  8. <section class="section">
  9. <div class="container">
  10. <h1 class="title">Nesting columns</h1>
  11. <h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
  12. <hr>
  13. <div class="content">
  14. <p>
  15. You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
  16. </p>
  17. <ul>
  18. <li>
  19. <code>columns</code>: top-level columns container
  20. <ul>
  21. <li>
  22. <code>column</code>
  23. <ul>
  24. <li>
  25. <code>columns</code>: nested columns
  26. <ul>
  27. <li>
  28. <code>column</code> and so on…
  29. </li>
  30. </ul>
  31. </li>
  32. </ul>
  33. </li>
  34. </ul>
  35. </li>
  36. </ul>
  37. <p>
  38. 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.
  39. </p>
  40. </div>
  41. <div class="columns">
  42. <div class="column">
  43. <p class="bd-notification is-info">First column</p>
  44. <div class="columns is-mobile">
  45. <div class="column">
  46. <p class="bd-notification is-info">First nested column</p>
  47. </div>
  48. <div class="column">
  49. <p class="bd-notification is-info">Second nested column</p>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="column">
  54. <p class="bd-notification is-danger">Second column</p>
  55. <div class="columns is-mobile">
  56. <div class="column is-half">
  57. <p class="bd-notification is-danger">50%</p>
  58. </div>
  59. <div class="column">
  60. <p class="bd-notification is-danger">Auto</p>
  61. </div>
  62. <div class="column">
  63. <p class="bd-notification is-danger">Auto</p>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="content">
  69. <p>
  70. Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
  71. </p>
  72. </div>
  73. </div>
  74. </section>