如何制作表格块以适合智能手机上的列尺寸和合理性？

Question

我刚开始使用Bootstrap 3.我在ii上有单页表格。我需要像这样设置表单布局：

<form class="row">
                <div class="col-sm-4 form-group">
                    <div class="input-group">
                        <label class="text-normal">label1</label>
                        <div class="input-group">
                            <input type="text" class="form-control"></input>
                            <span class="input-group-btn">
                                <button  class="btn btn-danger btn-md"><span class="glyphicon glyphicon-ban-circle"></span></button>
                                <button class="btn btn-primary btn-md"><span class="glyphicon glyphicon-filter"></span></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2 form-group">
                    <div class="input-group">
                        <label class="text-normal">label2</label>
                        <div class="input-group">
                            <input type="text" class="form-control"></input>
                            <span class="input-group-btn">
                                <button  class="btn btn-basic btn-md"><span class="glyphicon glyphicon-calendar"></span></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 form-group">
                    <div class="input-group input-group-justified">
                        <label class="text-normal">label3</label>
                        <input type="text" class="form-control" placeholder="placeholder"></input>
                    </div>
                </div>
                <div class="col-sm-3 form-group">
                    <div class="input-group">
                        <label class="text-normal">label4</label>
                        <input type="text" class="form-control" placeholder="placeholder"></input>
                    </div>
                </div>
                <div class="col-sm-6 form-group">
                    <div class="input-group">
                        <label class="text-normal">label5</label>
                        <input type="text" class="form-control" placeholder="placeholder"></input>
                    </div>
                </div>
                <div class="col-sm-3 form-group">
                    <div class="input-group">
                        <label class="text-normal">label6</label>
                        <input type="text" class="form-control" placeholder="placeholder"></input>
                    </div>
                </div>
                <div class="col-sm-3 form-group">
                    <div class="input-group">
                        <label class="text-normal">label7</label>
                        <input type="text" class="form-control" placeholder="placeholder"></input>
                    </div>
                </div>
        </form>

输入的组宽度在输入的标签文本上有所不同，但我认为它的宽度取决于列宽。 我尝试了几种方法，但所有方法都没有改变。 如何使这些块适合计算机上的固定宽度并在手机上进行调整？