使用Bootstrap添加手寫位置

Question

            <div class="row">
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <p class="classPadBottom0">Credit Card Number:</p>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3 ClsUnderline ClassPad0">
                    <p>&nbsp;</p>
                </div>
                <div class="col-md-2 col-sm-2 col-xs-2 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
                    <p class="classPadBottom0">Exp. Date:</p>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3 ClsUnderline">
                    <p>&nbsp;</p>
                </div>
            </div>

演示

我創建了一個小例子，說明我現在擁有的。 就像兩個標簽和手寫位置。 但是它的響應速度不是很好，並且標簽和手寫位置之間的空間太大。

還有另一種方法來添加這樣的空間嗎？

Answer 1

怎么樣-https: //jsfiddle.net/qyk1nbb5/2/

我利用定義列表為您提供了一個清晰的響應式解決方案，用於顯示標簽和值。 還使用標准的WordPress列結構。

涉及少量CSS，可以將表單項轉換為僅帶有下划線。

HTML：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <dl class="dl-horizontal">
                <dt><label for="card_number">Credit Card Number:</label></dt>
                <dd><input type="text" class="form-control text-line" id="card_number" name="card_number" /></dd>
            </dl>
        </div>
        <div class="col-sm-6">
            <dl class="dl-horizontal">
                <dt><label for="card_expiry">Exp Date:</label></dt>
                <dd><input type="text" class="form-control text-line" id="card_expiry" name="card_expiry" /></dd>
            </dl>
        </div>
    </div>
</div>

的CSS

DT {
    line-height: 34px;
}

INPUT.text-line {
    border: none;
    border-bottom: 1px solid #888888;

    box-shadow: none;
    -o-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;

    border-radius: 0;
    -o-border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

我希望這能回答您的問題並為您提供可行的解決方案。

您也許還應該閱讀有關內聯表單的內容-http: //getbootstrap.com/css/#forms-inline

另外，定義列表供您參考-http://getbootstrap.com/css/#description