# 缩略图导航/Thumbnav 创建可以使用 [Flex](flex.html) 进行对齐的弹性缩略图导航。 ## 用法 要使用这个组件的话,就这样做,添加 `.uk-thumbnav` 类到一个 `&lt;ul&gt;` 元素,然后将缩略图嵌套在列表条目内部的 `&lt;a&gt;` 元素中。如果缩略图导航比它的容器宽,并且使用了排水沟(gutter)时,添加 `.uk-active` 类创建active状态。 要对齐子导航的话,比如使它水平居中,你可以使用 [Flex](flex.html)。 ### Example ![](img/base-thimbnav.jpg) ### Markup ``` <ul class="uk-thumbnav"> <li class="uk-active"><a href=""><img src="" alt=""></a></li> <li><a href=""><img src="" alt=""></a></li> </ul> ``` * * * ### 缩略图导航与网格 你可以使用 [网格组件](grid.html) 中的 `.uk-grid-width-*` 类来实现在同一行中均匀地容纳缩略图导航条目。 #### Example ![](img/base-thimbnav-grid.jpg) #### Markup ``` <ul class="uk-thumbnav uk-grid-width-1-5"> <li>...</li> </ul> ```