html - 使用Bootstrap3将(3)行(5)文本输入均匀排列

我的目标是在Bootstrap的列中排列3行，每行5个文本输入。每个文本输入的最大宽度应为5个字符（文本输入的size属性）。

这是我现在所拥有的。请也检查该代码段的完整页面视图。

.inputs {
    border: 1px solid red;
}

.stuff {
    border: 1px solid blue;
}

.container {
    margin-top: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-xs-4 stuff"></div>
        <div class="col-md-8 col-xs-8 inputs">
            <div class="row">
                <div class="form-group col-md-2 col-xs-2">
                    <label for="a" class="control-label">A</label>
                    <input type="text" value="1" class="form-control" id="a" size="5" />
                </div>
                <div class="form-group col-md-2 col-xs-2">
                    <label for="b" class="control-label">B</label>
                    <input type="text" value="2" class="form-control" id="b" size="5" />
                </div>
                <div class="form-group col-md-2 col-xs-2">
                    <label for="c" class="control-label">C</label>
                    <input type="text" value="3" class="form-control" id="c" size="5" />
                </div>
                <div class="form-group col-md-2 col-xs-2">
                    <label for="d" class="control-label">D</label>
                    <input type="text" value="4" class="form-control" id="d" size="5" />
                </div>
                <div class="form-group col-md-2 col-xs-2">
                    <label for="e" class="control-label">E</label>
                    <input type="text" value="5" class="form-control" id="e" size="5" />
                </div>
            </div>
        </div>
    </div>
</div>

因此，我面临两个主要问题：


投入分配不均；
它们的宽度是父容器的100％，因此size属性值将被忽略；


解决该任务的最佳方法是什么？

谢谢。

最佳答案

可以使用引导程序的内置push类。您可以根据需要在我的示例中调整较小的col大小。但是我相信，通过设置更多的列大小和推送，这就是您想要实现的目标。

.inputs {
    border: 1px solid red;
}

.stuff {
    border: 1px solid blue;
}

.container {
    margin-top: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-xs-4 stuff"></div>
        <div class="col-md-8 col-xs-8 inputs">
            <div class="row">
                <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2">
                    <label for="a" class="control-label">A</label>
                    <input type="text" value="1" class="form-control" id="a" size="5" />
                </div>
                <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2">
                    <label for="b" class="control-label">B</label>
                    <input type="text" value="2" class="form-control" id="b" size="5" />
                </div>
                <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2">
                    <label for="c" class="control-label">C</label>
                    <input type="text" value="3" class="form-control" id="c" size="5" />
                </div>
                <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2">
                    <label for="d" class="control-label">D</label>
                    <input type="text" value="4" class="form-control" id="d" size="5" />
                </div>
                <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2">
                    <label for="e" class="control-label">E</label>
                    <input type="text" value="5" class="form-control" id="e" size="5" />
                </div>
            </div>
        </div>
    </div>
</div>