Question

我正在将Bootstrap 3与Kendo UI控件集成。

我遇到了多个表单水平部分的对齐问题，这里是HTML

            <ul id="acc-form-panelbar">
            <li class="k-state-active">
                <span class="k-link k-state-selected">Project Info</span>
                <section style="padding:10px 0;">
                    <div class="form-horizontal form-widgets col-sm-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" for="procod">Project Code</label>
                            <div class="col-sm-8">
                                <input id="procod" style="width: 25%;"/>
                            </div>
                        </div>
                    </div>
                    <div class="form-horizontal form-widgets col-sm-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" for="proshocod">Project Short Code</label>
                            <div class="col-sm-8">
                                <input id="proshocod" style="width: 25%;"/>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="form-horizontal form-widgets col-sm-12">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="protit">Project Title</label>
                            <div class="col-sm-10">
                                <input id="protit" style="width: 75%;" />
                            </div>
                        </div>
                    </div>
                </section>
                </li>
            <li class="">
                <span class="k-link">Users Info</span>
                <div class="row" style="margin: 20px 0;">
                    <div class="form-horizontal form-widgets col-sm-6">
                        <div class="form-group">
                            <label class="control-label col-sm-3" for="name">Name</label>
                            <div class="col-sm-8">
                                <input id="name" value="Bilal Haidar" style="width: 75%;" /> <!-- styles="width:100%;" -->
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-3" for="birthday">Birthday</label>
                            <div class="col-sm-8">
                                <input id="birthday" type="date" value="10/09/1979" style="width: 75%;" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-3" for="gender">Gender</label>
                            <div class="col-sm-8">
                                <select id="gender" style="width: 75%;"><option value="Male" selected="selected">Male</option><option value="Female">Female</option></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-3" for="language">Language</label>
                            <div class="col-sm-8">
                                <select id="language" style="width: 75%;"><option value="English" selected="selected">English</option><option value="German">German</option></select>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

任何人都可以告诉我对齐有什么问题？

由于

Answer 1

首先，我建议您删除所有内联样式的代码，并将每个连续的内容放在类行的div / section中的同一列上。 Bootstrap基于12网格系统。这意味着一旦完成12列，最后一个元素将被删除到一个新行。试试这些，看看会发生什么。

Bootstrap 3 - 尺寸和尺寸对齐问题

1 个答案: