Question

我不能为我的生活找出为什么我的输入组中有这种奇怪的间距。它发生在我创建的任何一个中，除非我将col间距减小到小于文本框。

这是我的HTML

<div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label for="cardNumber control-label col-md-3">CARD NUMBER</label>
                            <div class="input-group col-md-7">
                                <input name="number" type="tel" class="form-control cardNumber" size="20" data-stripe="number" placeholder="Valid Card Number" autocomplete="cc-number" required autofocus />
                                <span class="input-group-addon"><i class="glyphicon glyphicon-credit-card"></i></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
                    <span class="input-group-addon" id="basic-addon2">example.com</span>
                </div>

Answer 1

将第二行input-group div包含在行和列中，如下所示：

<div class="row">
    <div class="col-xs-12">
        <div class="form-group">
            <label for="cardNumber control-label col-md-3">CARD NUMBER</label>
            <div class="input-group col-md-7">
                <input name="number" type="tel" class="form-control cardNumber" size="20" data-stripe="number" placeholder="Valid Card Number" autocomplete="cc-number" required autofocus />
                <span class="input-group-addon"><i class="glyphicon glyphicon-credit-card"></i></span>
            </div>
        </div>
    </div>
</div>
<div class="row">
     <div class="col-xs-12">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
                    <span class="input-group-addon" id="basic-addon2">example.com</span>
                </div>
    </div>
</div>

Answer 2

默认情况下看起来.net在site.css中有这个css。这导致了我的问题。

input,
select,
textarea {
    max-width: 280px;
}

为什么我的输入组有这样的间距

2 个答案: