Question

上周我从bootstrap 4转到了基础6。也许是因为我缺乏基础经验。

但我的断点有问题。小断点永远不会起作用。它总是显示中断点。以下是我的代码示例以及我在320px宽度处制作的页面的屏幕截图。

<div class="grid-container">
    <section class="section">
    <h1 class="text-center">{{ entry.title }}</h1>
    <p class="text-center">{{ entry.subtext }}</p>

    <div class="grid-x activities">
        {% for activiteit in entry.activiteiten %}
        <div class="small-12 medium-4 cell">
            <div class="activity-card padding-2" style="background-color: {{ activiteit.kleurActiviteit }};">
                <div class="activity-card__image text-center">
                    <div style="background-image: url({{ activiteit.activiteitafbeelding.first().getUrl() }});"></div>
                </div>
                <div class="activity-card__title text-center">
                    <h2>{{ activiteit.title }}</h2>
                </div>
                <div class="activity-card__subtext">
                    <p class="text-center">{{ activiteit.korteTekst }}</p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

</section>

Answer 1

我解决了自己的问题。不得不在我的html标题中设置视口元标记。

<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

中等断点在基金会6中不起作用

1 个答案: