Question

我一直在使用Bootstrap v3制作适合移动设备的付款方式/应用程序。我在显示并排字段（2）和普通文本字段时遇到了一些困难。有信用卡到期月和信用卡到期年份。更改页面宽度时，标签/字段不会以相同的方式调整。下拉有时也难以阅读。我应该在下拉列表中使用固定的吗？有什么建议？参见JSFiddle示例。

https://jsfiddle.net/1dnqLb8r/

全屏

https://jsfiddle.net/1dnqLb8r/embedded/result/

<div class="container">
<fieldset>
    <legend>Credit Card Information</legend>
    <!-- Text input-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="AccountNo" id="AccountNo_label">* Card Number</label>
        <div class="col-md-5">
            <input id="AccountNo" name="AccountNo" type="tel" value="1234123412341234" placeholder="Debit / Credit Card Number" class="form-control input-md" required=""> <span class="help-block" style="display: none;">Enter a valid debit or credit card number. Spaces will be shown automatically.</span> 
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-4 control-label" for="CCMonth">* Card Expiration</label>
        <div class="col-md-5">
            <div class="row">
                <div class="col-xs-3">
                    <select class="form-control col-sm-2" name="CCMonth" id="CCMonth">
                        <option>Month</option>
                        <option value="01" Selected>Jan (01)</option>
                        <option value="02">Feb (02)</option>
                        <option value="03">Mar (03)</option>
                        <option value="04">Apr (04)</option>
                        <option value="05">May (05)</option>
                        <option value="06">June (06)</option>
                        <option value="07">July (07)</option>
                        <option value="08">Aug (08)</option>
                        <option value="09">Sep (09)</option>
                        <option value="10">Oct (10)</option>
                        <option value="11">Nov (11)</option>
                        <option value="12">Dec (12)</option>
                    </select>
                </div>
                <div class="col-xs-3">
                    <select class="form-control" name="CCYear">
                        <option>Year</option>
                        <option value="15" selected>2015</option>
                        <option value="16">2016</option>
                        <option value="17">2017</option>
                        <option value="18">2018</option>
                        <option value="19">2019</option>
                        <option value="20">2020</option>
                        <option value="21">2021</option>
                        <option value="22">2022</option>
                        <option value="23">2023</option>
                        <option value="24">2024</option>
                        <option value="25">2025</option>
                        <option value="26">2026</option>
                        <option value="27">2027</option>
                        <option value="28">2028</option>
                        <option value="29">2029</option>
                    </select>
                </div>
            </div> <span class="help-block" style="display: none;">Select the card expiration date month and year.</span> 
        </div>
    </div>

Answer 1

我认为这是你正在寻找的东西。我重新创建了你的布局并让它稀疏，这样你就可以看到我做了什么，以及它与你的代码相比如何。基本上，我认为你与cols混淆了，真的很容易做到。：）

<div class="container">
    <form class="form-horizontal">

        <label class="col-sm-5 control-label">Card Number</label>
        <div class="col-sm-7">
            <div class="form-group">
                <input type="text" class="form-control">
            </div>
        </div>

        <label class="col-sm-5 control-label">Card Expiration</label>
        <div class="col-sm-7">
            <!-- wrap in a .row to remove padding so it matches input:text field -->
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <select class="form-control">
                            <option>Year</option>
                        </select>
                    </div>
                </div>
                <!-- offset by 1 so it's not smashed up to the year select -->
                <div class="col-sm-5 col-sm-offset-1">
                    <div class="form-group">
                        <select class="form-control">
                            <option>Month</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>

HTML5 Bootstrap3：显示并排的信用卡到期月份和年份？

1 个答案: