css - Tachyons CSS：响应式按钮行

Question

我的网站

我用Tachyons 框架建立了一个会议网站。该页面有一排按钮，应根据页面宽度做出响应。

我的问题

按钮行在整个桌面宽度和窄 (<450 像素) 宽度下看起来很棒，但在 500-700 像素宽范围内失败 - 按钮没有按预期重新排列成两行。这在移动设备中看起来很可怕。

全屏宽度

500-700 像素宽

移动设备（< 450 像素）

代码

<div class="relative absolute-ns bottom--2-ns w-100 vh-20-ns bg-black-80 avenir pv3 pt0-ns mt3 mt0-ns">
    <div class="f4 f2-ns near-white avenir tc">
        <p>One Day. One Track. One Community.</p>
    </div>
    <div class="dt-ns center">
        <div class="dt-row-ns w-100 tc">

            <div class="dtc-ns pa2">
                <a href="#about">
                    <button id="cfp-button" type="button" class="f5 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 br2 b--black bg-near-white">
                        About
                    </button>
                </a>
            </div>

            <div class="dtc-ns pa2">
                <a href="https://www.eventbrite.com/e/serverless-days-tlv-tickets-44959103890">
                    <button id="tickets-button" type="button" class="f5 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 blue bg-near-white">
                        Register
                    </button>
                </a>
            </div>

            <div class="dtc-ns pa2">
                <a href="#speakers">
                    <button id="speakers-button" type="button" class="f5 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 br2 b--black bg-near-white">
                        Keynotes
                    </button>
                </a>
            </div>


            <div class="dtc-ns pa2">
                <a href="#cfp">
                    <button id="cfp-button" type="button" class="f6 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 br2 b--black bg-near-white">
                        Call for Papers
                    </button>
                </a>
            </div>

            <div class="dtc-ns pa2">
                <a href="#sponsors">
                    <button id="sponsor-button" type="button" class="f5 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 br2 b--black bg-near-white">
                        Sponsors
                    </button>
                </a>
            </div>
        </div>
    </div>
</div> 

我的问题

如何使按钮行完全响应，以便在页面缩小时拆分为 2 行或更多行？

Answer 1

我在这里推荐flex box作为一个快速的解决方案！您可以从孩子那里删除“dtc-ns”课程。

<div class="w-100 flex flex-wrap justify-center">
    <div class="pa2"></div>
    <div class="pa2"></div>
    <div class="pa2"></div>
    <div class="pa2"></div>
    <div class="pa2"></div>
</div>

从 ~576-719px，此视图将显示为一行 4，底部为 1。

实现第 3 行、第 2 行的一种方法是设置子级“中等”视口的宽度；“w-30-m”在这种情况下效果很好。

<div class="pa2 w-30-m"></div>