【问题标题】:Right aligning SelectBoxIt controls in a horizontal form以水平形式右对齐 SelectBoxIt 控件
【发布时间】:2014-12-12 23:14:06
【问题描述】:

我想如何将 SelectBoxIt 下拉列表旁边的控件标签与 “Process Date From”标签 相对应地右对齐,这将相应地推动 SelectBoxIt 控件。

“Process Date From”标签位于第 1 列,SelectBoxIt 下拉列表旁边的控件标签也是如此,但它们不像“Process Date From”标签那样右对齐。

我已经尝试了几个引导类,但无法让它工作......

这是我的代码,下面是图片:

HTML

位置: 保修经理 保修管理员 MFR 代码/Dsc: 用户: 全选 JM_WhyManager_1 发送过程状态: 全选 发送成功 发送失败 处理日期: 到:

【问题讨论】:

    标签: css asp.net html twitter-bootstrap


    【解决方案1】:

    经过进一步的了解,我摆脱了传统的水平表格网格系统布局,让我自己感到沮丧...

    我通过在选择框的标签控件上添加“col-sm-2”类来纠正此问题,并将其从包含标签和选择框控件的外部 div 中移除。

    我还将 selectboxit 控件包装在一个 div 中,并将“col-sm-2”类放在上面。

    以上所有内容均已纠正错误。

    下面是我的代码,下面是更新后的屏幕截图。

    HTML

    <div class="container nopadding">
                                                        <div class="form-group">
                                                            <div class="control-group">
                                                                <label class="control-label col-sm-2" for="ddlAppealTransmissionLogPosition">Position:</label>
                                                                <div class="col-sm-2">
                                                                    <select id="ddlAppealTransmissionLogPosition" class="form-control">
                                                                        <option value="Warranty Manager" selected>Warranty Manager</option>
                                                                        <option value="Warranty Admin">Warranty Admin</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <label class="col-sm-2 control-label" for="txtAppealTransmissionLogPositionManufacturerCode">MFR Code/Dsc:</label>
                                                            <div class="col-sm-2">
                                                                <input type="text" class="form-control" id="txtAppealTransmissionLogPositionManufacturerCode" placeholder="Enter Manufacturer">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <div class="control-group">
                                                                <label class="control-label col-sm-2" for="ddlAppealTransmissionLogUser">User:</label>
                                                                <div class="col-sm-2">
                                                                    <select id="ddlAppealTransmissionLogUser">
                                                                        <option value="Select All" selected>Select All</option>
                                                                        <option value="JM_WhyManager_1">JM_WhyManager_1</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="control-group">
                                                                <label class="control-label col-sm-2" for="ddlAppealTransmissionLogSentProcessStatus">Sent Proc Status:</label>
                                                                <div class="col-sm-2">
                                                                    <select id="ddlAppealTransmissionLogSentProcessStatus">
                                                                        <option value="Select All" selected>Select All</option>
                                                                        <option value="Successfully Sent">Successfully Sent</option>
                                                                        <option value="Unsuccessfully Sent">Unsuccessfully Sent</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="control-label col-sm-2" for="dteAppealTransmissionLogRequestedFromDate">Process Date From:</label>
                                                            <input class="col-sm-2" id="dteAppealTransmissionLogRequestedFromDate" placeholder="From Date" type="text" />
                                                            <span class="label label-default">To:</span>
                                                            <input class="" id="dteAppealTransmissionLogRequestedToDate" placeholder="To Date" type="text" />
                                                        </div>
                                                    </div>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-09-12
      • 2015-08-02
      • 1970-01-01
      • 2019-06-02
      • 1970-01-01
      • 2013-05-29
      • 1970-01-01
      相关资源
      最近更新 更多