Question

这是我的表格：

<form>
  <div class="row">
    <div class="small-12 medium-6 small-centered columns">
        <div class="row">
            <div class="medium-3 columns">
                <label for="right-label" class="right inline">Username:</label>
            </div>
            <div class="medium-9 columns">
                <input type="text" id="right-label" placeholder="Username">
            </div>
        </div>

        <div class="row">
            <div class="medium-3 columns">
                <label for="right-label" class="right inline">Password:</label>
            </div>
            <div class="medium-9 columns">
                <input type="text" id="right-label" placeholder="Password">
            </div>
        </div>

        <div class="row">
            <div class="columns">
                <input id="checkbox1" type="checkbox" class="right"><label for="checkbox1" class="right">Remember Me</label>
            </div>
        </div>

         <div class="row">
            <div class="columns">
                <input type="submit" class="button right" value="Log In">
            </div>
        </div>

    </div>
</div>

我有两个问题：

用户名和密码标签位于输入的左侧，使用正确的类，如何在屏幕尺寸较小时将其关闭？我希望标签在这个断点处居中。
我希望按钮是常规尺寸，除了小尺寸，它应该展开以填充行。我怎么能这样做？

Answer 1

可见性类允许您根据屏幕大小或设备方向显示或隐藏元素。您可以使用可见性类来控制用户根据其浏览环境看到的元素。

<p class="panel">
  <strong class="show-for-small-only">This text is shown only on a small screen.</strong>
  <strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
  <strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
  <strong class="show-for-large-up">This text is shown on large screens and up.</strong>
  <strong class="show-for-large-only">This text is shown only on a large screen.</strong>
  <strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
  <strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
  <strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
</p>

http://foundation.zurb.com/docs/components/visibility.html

登录表单以显示不同的屏幕

1 个答案: