时间戳

首页 > 解决方案 > uikit 3.0 - 移动响应式网格

html - uikit 3.0 - 移动响应式网格

问题描述

我目前正在玩 uikit ( https://getuikit.com )。我在创建响应式网格时遇到了麻烦。适用于台式机和移动设备。

我的 html 看起来像这样：

<div class="uk-section uk-section-muted">
<div class="uk-container uk-position-relative">
    <h1 class="uk-h1 uk-heading-line uk-text-center uk-text-lowercase"><span>hey</span></h1>
    <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-large uk-card-hover uk-card-body uk-responsive-width">
                <h3 class="uk-card-title uk-text-lowercase">lorem</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore
                    et dolore magna aliqua.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-large uk-card-hover uk-card-body uk-responsive-width">
                <h3 class="uk-card-title uk-text-lowercase">lorem</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore
                    et dolore magna aliqua.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-large uk-card-hover uk-card-body uk-responsive-width">
                <h3 class="uk-card-title uk-text-lowercase">lorem</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore
                    et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>

它在桌面浏览器上看起来不错，但在移动设备上却不行。移动版如下所示： https ://prnt.sc/jet3f3

它应该看起来像这样： http: //prntscr.com/jet47e

谢谢你的支持，

干杯

标签： htmlcsswebuikitresponsive

解决方案

您缺少包含 js 文件的所有内容

<script src="https://getuikit.com/assets/uikit/dist/js/uikit.js"></script>

并确保您的 HTML inside<head>标签包含

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是一个带有测试的codepen https://codepen.io/AElkhodary/pen/rvYGjo?editors=1010

你也可以检查代码

这就是它在响应行为中的样子在此处输入图像描述 

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.css" rel="stylesheet"/>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit.js"></script>
<div class="uk-section uk-section-muted">
<div class="uk-container uk-position-relative">
    <h1 class="uk-h1 uk-heading-line uk-text-center uk-text-lowercase"><span>hey</span></h1>
    <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-large uk-card-hover uk-card-body uk-responsive-width">
                <h3 class="uk-card-title uk-text-lowercase">lorem</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore
                    et dolore magna aliqua.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-large uk-card-hover uk-card-body uk-responsive-width">
                <h3 class="uk-card-title uk-text-lowercase">lorem</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore
                    et dolore magna aliqua.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-large uk-card-hover uk-card-body uk-responsive-width">
                <h3 class="uk-card-title uk-text-lowercase">lorem</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore
                    et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>

推荐阅读