html - bootstrap 3复杂形式的问题

Question

我有以下带有多个输入的表格

        <form>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">filename: teamA_vs_teamB.mvd, map: ztndm3</div>
                <div class="col-md-2"></div>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-4">TeamA</div>
                <div class="col-md-4">TeamB</div>
                <div class="col-md-2"></div>
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-1">name</div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p1_name">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p2_name">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p3_name">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p4_name">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p5_name">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p6_name">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p7_name">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p8_name">
                </div>
                <div class="col-md-2"></div>
            </div>
            </br>
            <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-1">frags</div>
                    <div class="col-md-1">
                        <input class="form-control" type="text" name="p1_frags">
                    </div>
                    <div class="col-md-1">
                        <input class="form-control" type="text" name="p2_frags">
                    </div>
                    <div class="col-md-1">
                        <input class="form-control" type="text" name="p3_frags">
                    </div>
                    <div class="col-md-1">
                        <input class="form-control" type="text" name="p4_frags">
                    </div>
                    <div class="col-md-1">
                        <input class="form-control" type="text" name="p5_frags">
                    </div>
                    <div class="col-md-1">
                        <input class="form-control" type="text" name="p6_frags">
                    </div>
                    <div class="col-md-1">
                        <input class="form-control" type="text" name="p7_frags">
                    </div>
                    <div class="col-md-1">
                        <input class="form-control" type="text" name="p8_frags">
                    </div>
                    <div class="col-md-2"></div>
                </div>
            </br>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-1">deaths</div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p1_deaths">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p2_deaths">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p3_deaths">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p4_deaths">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p5_deaths">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p6_deaths">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p7_deaths">
                </div>
                <div class="col-md-1">
                    <input class="form-control" type="text" name="p8_deaths">
                </div>
                <div class="col-md-2"></div>
            </div>
            <div class="row">
                <button type="submit" class="btn btn-primary">Process</button>
            </div>
        </form>
    </div>

我的问题是它看起来根本不像“引导程序”。我想：

• 垂直居中“名称”、“碎片”和“死亡”项目
• 使输入字段更小
• 修复整个表单的居中问题，因为如您所见，我通过添加一些 div 来填充最多 12 列来使用解决方法

修复它的最佳方法是什么？此外，为了更好地解释，我还创建了这个片段：https ://bootsnipp.com/snippets/mQoqO

标签： htmlcsstwitter-bootstrap-3