1

Bootstrap で 2 つのフォームを隣り合わせに座らせようとしています。方法はありますか？

基本的に、右側に空白が多すぎるので、キーコードと郵便番号の両方のフォームを同じ行に配置して、視覚的に見栄えを良くしたいと思います。

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 を使用して、グリッド システムを確認します: 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/

于 2013-09-06T19:11:22.633 に答える
0

span6各フォームをdiv などのコンテナにラップするだけです。

于 2013-09-06T19:02:10.697 に答える