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>

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

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

见下文：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 / modify 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>

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

1 个答案: