带引导程序的表单设计 - 对齐文本框和文本区域答案

【问题标题】：Form Design with bootstrap - Align Text boxes and text areas带引导程序的表单设计 - 对齐文本框和文本区域
【发布时间】：2016-03-02 12:02:08
【问题描述】：

如上图所示，我想将文本框向上移动以与 TextArea 对齐。我可以申请任何 Bootstrap 课程吗？我正在使用 boostrap 3.3.6

HTML

                <div class="panel-body">
                    <div class="col-md-12 col-sm-12">
                        <div class="row top-buffer">
                            <div class="col-md-2">
                                Quote Date:
                            </div>
                            <div class="col-md-2">
                                <asp:TextBox ID="txtReference" class="form-control" runat="server" ></asp:TextBox>
                            </div>
                            <div class="col-md-2">
                                Quote Prepared By:
                            </div>
                            <div class="col-md-2">
                                <asp:TextBox ID="txtCountry" class="form-control" runat="server"></asp:TextBox>
                            </div>
                        </div>

                         <div class="row top-buffer">
                            <div class="col-md-2">
                                Reseller:
                            </div>
                            <div class="col-md-2">
                                <asp:TextBox ID="TextBox1" class="form-control" runat="server" ></asp:TextBox>
                            </div>
                          <div class="col-md-2">
                                Notes:
                            </div>
                            <div class="col-md-2">
                                <asp:TextBox ID="TextBox2" class="form-control" runat="server" TextMode="MultiLine" Height="252px" Width="414px"></asp:TextBox>
                            </div>


                        </div>

                        <div class="row top-buffer">
                            <div class="col-md-2">
                                Reseller Contact:
                            </div>
                            <div class="col-md-2">
                                <asp:TextBox ID="TextBox3" class="form-control" runat="server" ></asp:TextBox>
                            </div>

                        </div>

                    </div>
                </div>
            </div>

【问题讨论】：

您必须将表单分成两列。在引导程序中，col-md-6.

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这就是您想要的，一种更简洁且响应迅速的设计。您的目标是必须 col-md-6 列，因为您将内容分成两列：

调整浏览器大小并查看结果： https://jsfiddle.net/L4LtoLsz/

<div class="panel-body">
<form class="form-horizontal">

    <div class="col-md-6">
        <div class="row top-buffer">

            <div class="form-group">
                <label for="inputEmail1" class="col-sm-3 control-label">Quote Date:</label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" id="inputEmail1" placeholder="Quote Date">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail2" class="col-sm-3 control-label">Reseller</label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" id="inputEmail2" placeholder="Reseller">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-3 control-label">Reseller Contact:</label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Reseller Contact">
                </div>
            </div>
          </div>
       </div>


    <div class="col-md-6">
        <div class="row top-buffer">

            <div class="form-group">
                <label for="inputEmail5" class="col-sm-3 control-label">Quote Prepared By:</label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" id="inputEmail5" placeholder="Quote Prepared By">
                </div>
            </div>

            <div class="form-group">
                <label for="tarea" class="col-sm-3 control-label">Notes:</label>
                <div class="col-sm-9">
                    <textarea id="tarea" class="form-control"></textarea>
                </div>
            </div>

        </div>
    </div>

    </form>

【讨论】：

没有问题，我还建议你检查引导网站上的表单示例，以使设计更简洁，你可以一起删除标签，只留下占位符，具体取决于你的应用程序。