试图在 Bootstrap 中将两个表单并排放置。任何想法如何？

Question

尝试在 Bootstrap 中将两个表单并排放置。有什么想法吗？

基本上，我只是在右侧有太多的空白，我想将 keycode 和 zipcode 表单放在同一行上，这样在视觉上看起来很舒服。

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>

Answer 1

使用 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/

Answer 2

只需将每个表单包装在一个容器中，例如 span6 div 之类的。