1

试图在 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>
4

2 回答 2

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”，因此在上面的示例中，列的权重相同。否则，您可以使用.span3and.span9类进行 1/3 或 3/1 拆分。除了能够偏移列之外，您还有很多选择。

更新 我已经更新了上面的示例，以便在代码的上下文中向您展示更多内容。我没有包括所有这些。

更新 #2 看看这里的例子：http: //jsfiddle.net/Yp3ve/1/

于 2013-09-06T19:11:22.633 回答
0

只需将每个表单包装在一个容器中，例如span6div 或其他东西。

于 2013-09-06T19:02:10.697 回答