Question

我在Bootstrap网格中有一个Select输入和2个文本字段，如下所示

<div class="form-group form-group-lg error_container dob_container">
        <label for="field01" class="control-label column">Date of Birth</label>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="row">
                <div class="col-xs-5 remColPad removeRight">
                    <select id="field01" class="form-control input-lg col-sm-12">
                        <option value="">Month</option>
                        <option value="January">January</option>
                        <option value="February">February</option>
                        <option value="March">March</option>
                        <option value="April">April</option>
                    </select>
                </div>
                <div class="col-xs-3 remColPad">
                    <input id="day01" maxlength="2" type="text" name="day01" value="" class="form-control input-lg day_field col-sm-12" placeholder="DD" />
                </div>
                <div class="col-xs-4 remColPad">
                    <input id="year01" maxlength="4" type="text" name="year01" value="" class="form-control input-lg year_field col-sm-12" placeholder="YYYY"/>
                </div>
            </div>
        </div>
</div>

问题在于，输入元素不会跨越外部网格的整个宽度，并且右侧总是存在间隙。特别是在sm模式下 - 由于间隙，元素不清晰。我该如何解决这个问题？

JSFiddle - http://jsfiddle.net/6ydh5mrj/

Gap

我认为这可能是因为我在那里投入的负面余量使输入元素相互粘连。如果是这样，是否有解决方法？

Answer 1

我认为您的问题已经得到解答here。

我认为问题的一部分是输入元素的宽度由＆＃34;宽度＆＃34;决定。该元素的属性。

我不认为设置＆＃34; col-x2-12＆＃34;在里面＆＃34; col-xs-4＆＃34;也是一个好主意。通常，您只希望使用Bootstrap网格将行/容器拆分为列，而不是将列拆分为列。您可以将列拆分为列，但如果您不这样做，它会更清晰，更容易跟踪问题。将.container或.container-fluid类添加到.row的父级将使行/列知道如何操作。请仔细阅读Bootstrap文档。

您还需要类来为其他设备指定列宽 - 并非所有在代码中使用预定义Bootstrap类的元素（post或fiddle）都指定了所有宽度。

Bootstrap网格中的输入元素不会跨越整个宽度

1 个答案: