zurb-foundation - 如何使用 Foundation 5 Zurb 设置输入元素的宽度

Question

下面是html JSFiddle - Problem

<div class="row"> <div class="small-3 medium-3 large-3 columns"> <label for="firstName" class="inline">* First Name:</label> </div> <div class="small-9 medium-9 large-9 columns"> <input type="text" name="firstName" id="firstName" placeholder="First Name" /> </div> </div>

默认情况下，输入元素跨越整个页面宽度。我想限制元素的宽度。

实现此目的的一种方法是使用不完整的行并添加类结尾。

见下文:JSFiddle - Solution

<div class="row">
<div class="small-3 medium-3 large-3 columns">
    <label for="firstName" class="inline">* First Name:</label>
</div>
<div class="small-3 medium-3 large-3 end columns">
    <input type="text" name="firstName" id="firstName" placeholder="First Name" />
</div>

这是正确的方法吗？或者有没有其他方法可以做到。 我知道我可以使用 css/修改 css，但想看看是否有其他方法可以使用 Foundation 来做到这一点。

Answer 1

这是调整输入元素大小的正确方法。

虽然有很多方法可以做到这一点，但将表单元素包装在 column 类中是推荐的方法。例如，要生成宽度为 50% 的输入，请将输入包装在 large-6 columns end 类中。

<form>
  <div class="row">
    <div class="large-6 columns end">
      <label>Input Label
        <input type="text" placeholder="large-12.columns" />
      </label>
    </div>
  </div>
</form>