Question

在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>

Answer 1

使用Bootstrap，您需要查看网格系统：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或其他东西。

试着在Bootstrap中将两个表单放在一起。任何想法如何？

2 个答案: