如何在基础 5 的行左侧有多个输入，右侧有一个输入
how to have multiple inputs on left side of row and one on the right in foundation 5
如何将城市、州和邮政编码输入上移到它们应该在的位置？我一直在摆弄行和 end、pull、push 和 offset classes 但我想我还没有找到正确的组合.任何帮助都会很棒。谢谢！
我的模式HTML：
<a class="side-nav-btn button small" href="#" data-reveal-id="customerModal">客户</a>
<div id="customerModal" class="reveal-modal" 数据显示>
<h3>客户</h3>
<表格>
<div class="row">
<div class="large-6 columns">
<标签>公司名称
<输入类型="text" 占位符="Enter Business Name" />
</标签>
</div>
<div class="large-6 columns">
<label>联系人姓名
<输入类型="text" 占位符="Enter Contact Name" />
</标签>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<标签>业务 Phone
<输入类型="email" 占位符="Enter Business Phone Number" />
</标签>
</div>
<div class="large-6 columns">
<标签>联系人 Phone
<输入类型="text" 占位符="Enter Contact Phone Number" />
</标签>
</div><br>
</div>
<div class="row">
<div class="large-6 columns">
<标签>地址 1
<输入类型="text" 占位符="Enter Address" />
</标签>
</div>
<div class="large-6 columns">
<label>联系邮箱
<输入类型="text" 占位符="Enter Contact Email" />
</标签>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<标签>地址 2
<输入类型="text" 占位符="Enter Address" />
</标签>
</div>
<div class="large-6 columns">
<标签>注释
<textarea placeholder="Enter Optional Notes" rows="10"></textarea>
</标签>
</div>
</div>
<div class="row">
<div class="large-6 columns end">
<标签>城市
<输入类型="text" 占位符="Enter City" />
</标签>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>状态
<select>
<option value="AL">阿拉巴马州</option>
<option value="AK">阿拉斯加</option>
<option value="AZ">亚利桑那</option>
<option value="AR">阿肯色州</option>
<option value="CA">加州</option>
<option value="CO">科罗拉多</option>
<option value="CT">康涅狄格</option>
<option value="DE">特拉华州</option>
<option value="FL">佛罗里达</option>
<option value="GA">格鲁吉亚</option>
<option value="HI">夏威夷</option>
<option value="ID">爱达荷</option>
<option value="IL">伊利诺伊州</option>
<option value="IN">印第安纳州</option>
<option value="IA">爱荷华</option>
<option value="KS">堪萨斯</option>
<option value="KY">肯塔基州</option>
<option value="LA">路易斯安那州</option>
<option value="ME">缅因州</option>
<option value="MD">马里兰州</option>
<option value="MA">马萨诸塞州</option>
<option value="MI">密歇根</option>
<option value="MN">明尼苏达</option>
<option value="MS">密西西比州</option>
<option value="MO">密苏里州</option>
<option value="MT">蒙大拿州</option>
<option value="NE">内布拉斯加州</option>
<option value="NV">内华达</option>
<option value="NH">新罕布什尔</option>
<option value="NJ">新泽西</option>
<option value="NM">新墨西哥</option>
<option value="NY">纽约</option>
<option value="NC">北卡罗来纳</option>
<option value="ND">北达科他州</option>
<option value="OH">俄亥俄州</option>
<option value="OK">俄克拉何马州</option>
<option value="OR">俄勒冈</option>
<option value="PA">宾夕法尼亚州</option>
<option value="RI">罗德岛</option>
<option value="SC">南卡罗来纳州</option>
<option value="SD">南达科他州</option>
<option value="TN">田纳西州</option>
<option value="TX">德克萨斯</option>
<option value="UT">犹他州</option>
<option value="VT">佛蒙特州</option>
<option value="VA">弗吉尼亚</option>
<option value="WA">华盛顿</option>
<option value="WV">西弗吉尼亚</option>
<option value="WI">威斯康星州</option>
<option value="WY">怀俄明州</option>
</select>
</标签>
</div>
</div>
<div class="row">
<div class="large-6 columns"><br>
<标签>邮政编码
<输入类型="text" 占位符="Enter zipcode">
</标签>
</div>
</div><br>
<输入类型="submit"class="add-btn button right small"值="Add">
<a class="close-reveal-modal">×</a><!--关闭按钮-->
</表格>
</div><!--模态-->
一种解决方案是创建巨大的柱子。所以整个左边是一列，整个右边是一列。
（注意不要盲目复制和粘贴，我删除了一些字段以节省时间。）
为了详细说明，您正在为 "notes" 和 "address" 创建一个动态大小的行。您需要将它们分成不同的容器，这样它们就不会共享相同的高度。我发现我需要每隔一段时间将其可视化，为此您可以在 chrome 中打开您的页面并右键单击并转到检查元素，然后当您突出显示代码时，您可以看到包含哪些行和列哪些元素带有漂亮的小彩色框。
<a class="side-nav-btn button small" href="#" data-reveal-id="customerModal">Customers</a>
<div id="customerModal" class="reveal-modal" data-reveal>
<h3>Customers</h3>
<form>
<div class="row">
<div class="large-6 columns">
<div class="row">
<div class="large-12 columns">
<label>Business Name
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>City
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>State
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Zip
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-12 columns">
<label>Contact Name
<input type="text" placeholder="Enter Contact Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Notes
<textarea placeholder="Enter Optional Notes" rows="10"></textarea>
</label>
</div>
</div>
</div>
</div>
</form>
</div>
如何将城市、州和邮政编码输入上移到它们应该在的位置？我一直在摆弄行和 end、pull、push 和 offset classes 但我想我还没有找到正确的组合.任何帮助都会很棒。谢谢！
我的模式HTML：
<a class="side-nav-btn button small" href="#" data-reveal-id="customerModal">客户</a>
<div id="customerModal" class="reveal-modal" 数据显示>
<h3>客户</h3>
<表格>
<div class="row">
<div class="large-6 columns">
<标签>公司名称
<输入类型="text" 占位符="Enter Business Name" />
</标签>
</div>
<div class="large-6 columns">
<label>联系人姓名
<输入类型="text" 占位符="Enter Contact Name" />
</标签>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<标签>业务 Phone
<输入类型="email" 占位符="Enter Business Phone Number" />
</标签>
</div>
<div class="large-6 columns">
<标签>联系人 Phone
<输入类型="text" 占位符="Enter Contact Phone Number" />
</标签>
</div><br>
</div>
<div class="row">
<div class="large-6 columns">
<标签>地址 1
<输入类型="text" 占位符="Enter Address" />
</标签>
</div>
<div class="large-6 columns">
<label>联系邮箱
<输入类型="text" 占位符="Enter Contact Email" />
</标签>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<标签>地址 2
<输入类型="text" 占位符="Enter Address" />
</标签>
</div>
<div class="large-6 columns">
<标签>注释
<textarea placeholder="Enter Optional Notes" rows="10"></textarea>
</标签>
</div>
</div>
<div class="row">
<div class="large-6 columns end">
<标签>城市
<输入类型="text" 占位符="Enter City" />
</标签>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>状态
<select>
<option value="AL">阿拉巴马州</option>
<option value="AK">阿拉斯加</option>
<option value="AZ">亚利桑那</option>
<option value="AR">阿肯色州</option>
<option value="CA">加州</option>
<option value="CO">科罗拉多</option>
<option value="CT">康涅狄格</option>
<option value="DE">特拉华州</option>
<option value="FL">佛罗里达</option>
<option value="GA">格鲁吉亚</option>
<option value="HI">夏威夷</option>
<option value="ID">爱达荷</option>
<option value="IL">伊利诺伊州</option>
<option value="IN">印第安纳州</option>
<option value="IA">爱荷华</option>
<option value="KS">堪萨斯</option>
<option value="KY">肯塔基州</option>
<option value="LA">路易斯安那州</option>
<option value="ME">缅因州</option>
<option value="MD">马里兰州</option>
<option value="MA">马萨诸塞州</option>
<option value="MI">密歇根</option>
<option value="MN">明尼苏达</option>
<option value="MS">密西西比州</option>
<option value="MO">密苏里州</option>
<option value="MT">蒙大拿州</option>
<option value="NE">内布拉斯加州</option>
<option value="NV">内华达</option>
<option value="NH">新罕布什尔</option>
<option value="NJ">新泽西</option>
<option value="NM">新墨西哥</option>
<option value="NY">纽约</option>
<option value="NC">北卡罗来纳</option>
<option value="ND">北达科他州</option>
<option value="OH">俄亥俄州</option>
<option value="OK">俄克拉何马州</option>
<option value="OR">俄勒冈</option>
<option value="PA">宾夕法尼亚州</option>
<option value="RI">罗德岛</option>
<option value="SC">南卡罗来纳州</option>
<option value="SD">南达科他州</option>
<option value="TN">田纳西州</option>
<option value="TX">德克萨斯</option>
<option value="UT">犹他州</option>
<option value="VT">佛蒙特州</option>
<option value="VA">弗吉尼亚</option>
<option value="WA">华盛顿</option>
<option value="WV">西弗吉尼亚</option>
<option value="WI">威斯康星州</option>
<option value="WY">怀俄明州</option>
</select>
</标签>
</div>
</div>
<div class="row">
<div class="large-6 columns"><br>
<标签>邮政编码
<输入类型="text" 占位符="Enter zipcode">
</标签>
</div>
</div><br>
<输入类型="submit"class="add-btn button right small"值="Add">
<a class="close-reveal-modal">×</a><!--关闭按钮-->
</表格>
</div><!--模态-->
一种解决方案是创建巨大的柱子。所以整个左边是一列，整个右边是一列。
（注意不要盲目复制和粘贴，我删除了一些字段以节省时间。）
为了详细说明，您正在为 "notes" 和 "address" 创建一个动态大小的行。您需要将它们分成不同的容器，这样它们就不会共享相同的高度。我发现我需要每隔一段时间将其可视化，为此您可以在 chrome 中打开您的页面并右键单击并转到检查元素，然后当您突出显示代码时，您可以看到包含哪些行和列哪些元素带有漂亮的小彩色框。
<a class="side-nav-btn button small" href="#" data-reveal-id="customerModal">Customers</a>
<div id="customerModal" class="reveal-modal" data-reveal>
<h3>Customers</h3>
<form>
<div class="row">
<div class="large-6 columns">
<div class="row">
<div class="large-12 columns">
<label>Business Name
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>City
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>State
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Zip
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-12 columns">
<label>Contact Name
<input type="text" placeholder="Enter Contact Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Notes
<textarea placeholder="Enter Optional Notes" rows="10"></textarea>
</label>
</div>
</div>
</div>
</div>
</form>
</div>