使用Bootstrap3

Question

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

这就是我现在所拥有的。另请查看代码段的完整页面视图。

＆＃13;

＆＃13;

.inputs {
    border: 1px solid red;
}

.stuff {
    border: 1px solid blue;
}

.container {
    margin-top: 100px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

所以，我面临两个主要问题：

1. 输入不均匀排列;
2. 它们的宽度是父容器的100％，因此忽略size属性值;

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

谢谢。

Answer 1

使用bootstrap的内置推送类可能是可能的。您可以根据需要在我的示例中调整较小的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>