uikit 3.0 - адаптивная сетка для мобильных устройств - PullRequest
0 голосов
/ 07 мая 2018

я сейчас играю с 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

Спасибо за вашу поддержку,

ура

1 Ответ

0 голосов
/ 07 мая 2018

Все, что вам не хватало, чтобы включить файл js

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

, а также убедиться, что ваш HTML-тег внутри <head> содержит

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

, а вот кодовая ручка с тестомhttps://codepen.io/AElkhodary/pen/rvYGjo?editors=1010

, а также вы можете проверить код вниз

вот так это выглядит в адаптивном поведении enter image description here

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...