Bootstrap 3 - 大小调整和对齐问题

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 行的同一列/ class 部分中。 Bootstrap基于12格系统。这意味着一旦 12 列完成，最后一个元素将被放到新的一行。试试这些，看看会发生什么。

Bootstrap 3 - 大小调整和对齐问题

Bootstrap 3 - Sizing & alignment issues

twitter-bootstrap-3

kendo-ui