尝试在 Bootstrap 中将两个表单并排放置.任何想法如何
Trying to sit two forms next to eachother in Bootstrap. Any ideas how to?
尝试在 Bootstrap 中将两个表单并排放置。有什么想法吗?
基本上,我只是在右侧有太多的空白,我想把键码和邮政编码表格放在同一行上,这样它在视觉上看起来很令人愉悦。
http://rsatestamls.kaliocommerce.com/cart.aspx
我的代码如下所示:
<div class="cartoptionbox">
<div class="control-group">
<div class="controls">
<form class="form-horizontal form-inline" method="post" id="Keycode">
<input type="hidden" name="formName" value="dmiformCouponKeycodeHandler">
<input type="hidden" name="pageURL" value="[[DMI:Expression value='Core.GetCurrentPageName()' ]][[/DMI:Expression]]">
<h4 class="heading4"> Enter source code for discounted pricing.</h4>
<fieldset>
<label class="label" for="keycode" title="Keycode">
Source Code:
</label>
<input type="text" id="keycode" name="keycode" />
<input id="cart-keycode-apply" type="submit" class="btn btn-orange" value="Apply" />
</fieldset>
</form>
<form class="form-horizontal form-inline" id="ShipEstimate">
<h4 class="heading4"> Enter your Zip Code to get a shipping estimate.</h4>
<fieldset>
<label class="label" for="PostalCode_SHIP" title="Zip">
Zip Code:
</label>
<input type="text" id="PostalCode_SHIP" value="" name="PostalCode_SHIP" OnChange='populateCartTotalInCartPage();' minlength="5" />
<input type="hidden" id="COUNTRY_SHIP" name="COUNTRY_SHIP" value="US" />
<input type="button" OnClick="populateCartTotalInCartPage();toggleTable();" value="Get Quotes" class="btn btn-orange">
</fieldset>
</form>
<script>
$("#ShipEstimate").validate();
</script>
</div>
</div>
</div>
使用 Bootstrap,您想查看 Grid 系统: http://getbootstrap.com/css/#grid。
以下是让事情顺利进行的基本想法:
<div class="cartoptionbox">
<div class="row">
<div class="span6">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="key code">Source Code</label>
<div class="controls">
<input type="text" id="keycode" name="keycode">
<input id="cart-keycode-apply" type="submit" class="btn btn-orange" value="Apply">
</div>
</div>
</form>
</div>
<div class="span6">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="PostalCode_SHIP">Zip Code:</label>
<div class="controls">
<input type="text" id="PostalCode_SHIP" value="" name="PostalCode_SHIP" onchange="populateCartTotalInCartPage();" minlength="5">
<input type="button" onclick="populateCartTotalInCartPage();toggleTable();" value="Get Quotes" class="btn btn-orange">
</div>
</div>
</form>
</div>
</div>
</div>
请记住,幻数是"12",因此在上面的示例中,列的权重相等。否则,您可以使用 .span3
和 .span9
类进行 1/3 或 3/1 拆分。您有很多选择,还可以偏移列。
更新我已经更新了上面的示例,以便在代码上下文中向您展示更多内容。我没有包括所有这些。
更新 #2看看这里的例子:http://jsfiddle.net/Yp3ve/1/
只需将每个表单包装在一个容器中,例如span6
div之类的。
相关文章:
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- 使用Javascript/jQuery以编程方式将当前锚点/哈希/片段附加到任何表单操作url
- 表单未使用 MVC 提交任何值 Asp.Net
- 我想知道如何在javascript中进行表单验证
- html表单,它有文本和表,现在我想在一个简单的文本文件中保存和检索数据,如何实现它
- 如何通过ajax php将图像上传到服务器本地目录,其中html表单haven't任何传统的提交按钮
- 创建按钮不调用表单内的任何操作
- 我想知道如何只激活表单提交,而不获取jquery中ajax url的值
- Javascript,表单中任何复选框的事件处理程序
- POST数据没有'不包含任何表单数据
- 当用户使用jquery点击任何位置时,切换并隐藏登录表单
- 在javascript中通过id获取元素,而页面上没有任何表单标记
- 我想防止搜索表单中出现空字段
- 我想用所选项目的数据填充我的编辑表单
- JS表单验证 - 提交按钮不执行任何操作
- 只想在用户单击 html 表单上的“提交”时显示绿色复选标记
- 任何一个输入所需的文本区域或 HTML 表单中的复选框
- PHP密码脚本和JavaScript刷新冲突,发出我想消除的表单重新提交消息
- 需要制作保存任何更改的Web表单,即使不单击“发送”
- jQuery 表单验证不会引发任何错误