archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Fix sidebar and content area not wrapping

Browse Source
This commit is contained in:
Adam Wathan 2017-08-23 19:30:21 -04:00
parent d662678ae5
commit 61238ef582
2 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/source/_layouts/master.blade.php
View File

@ -27,8 +27,8 @@
</div>
</header>
<div class="container">
<div class="flex">
<div class="w-full sm:w-1/4">
<div class="flex flex-wrap">
<div class="w-full lg:w-1/4">
<nav class="py-4 text-light text-base">
<div>
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Introduction</p>
@ -75,7 +75,7 @@
</div>
</nav>
</div>
<div class="w-full sm:w-3/4">
<div class="w-full lg:w-3/4">
<div class="p-12 rounded-lg bg-light shadow-2">
@yield('body')
</div>

32
docs/source/grid.md
View File

@ -7,8 +7,8 @@ title: "Grid"
Basic grid example:
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
<div class="text-dark-soft mb-2 px-4 leading-none">.flex.flex-wrap</div>
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3">
<div class="text-center py-4 bg-dark-softer text-light">
@ -30,8 +30,8 @@ Basic grid example:
Columns don't need to fill a row:
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
<div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/4">
<div class="text-center py-4 bg-dark-softer text-light">
@ -54,8 +54,8 @@ Columns don't need to fill a row:
Columns can be different widths:
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
<div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/4">
<div class="text-center py-4 bg-dark-softer text-light">
@ -78,8 +78,8 @@ Columns can be different widths:
Rows can overflow and wrap:
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
<div class="text-dark-soft mb-2 px-4 leading-none">.flex.flex-wrap</div>
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3">
<div class="text-center py-4 bg-dark-softer text-light">
@ -111,8 +111,8 @@ Rows can overflow and wrap:
Columns can have gutters:
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
<div class="text-dark-soft mb-2 px-4 leading-none">.flex.pull-x-4</div>
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex.pull-x-4</div>
<div class="flex flex-wrap pull-x-4">
<div class="flex-none w-full md:w-1/3 px-4">
<div class="text-center py-4 bg-dark-softer text-light">
@ -144,8 +144,8 @@ Columns can have gutters:
Column widths can be automatic:
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
<div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex</div>
<div class="flex flex-wrap">
<div class="w-1/4 md:flex-fill">
<div class="text-center py-4 bg-dark-softer text-light">
@ -177,8 +177,8 @@ Column widths can be automatic:
Fixed width columns are still respected even if a smaller screen has auto column widths:
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
<div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex</div>
<div class="flex flex-wrap">
<div class="flex-fill md:w-1/6 md:flex-none">
<div class="text-center py-4 bg-dark-softer text-light">
@ -221,8 +221,8 @@ Fixed width columns are still respected even if a smaller screen has auto column
Use margin auto utilities to accomplish offsets:
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
<div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3 md:ml-auto">
<div class="text-center py-4 bg-dark-soft text-light">