Question

我正在使用Bootstrap模式。

以下是我的代码。

<!-- Modal -->
<div class="modal fade" id="editModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4>Edit Equifax Credit Score Data</h4>
            </div>
            <div class="modal-body form-horizontal">
                <div class="form-group row">
                    <label for="name" class="col-sm-2 col-form-label">Name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="equiFaxName"
                            placeholder="Name" readonly="readonly" />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="startRangeModal" class="col-sm-2 col-form-label">Start
                        Range</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="startRangeModal"
                            placeholder="Start Range" />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="endRangeModal" class="col-sm-2 col-form-label">End
                        Range</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="endRangeModal"
                            placeholder="End Range" />
                    </div>
                </div>
                <div class="form-group row required">
                    <label for="riskGradeModal" class="col-sm-2 col-form-label">Risk
                        Grade </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="riskGradeModal"
                            placeholder="Risk Range" />
                    </div>
                </div>
                <div class="form-group row required">
                    <label for="agentRiskGradeModal" class="col-sm-2 col-form-label">Agent
                        Display Grade</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="agentRiskGradeModal"
                            placeholder="Agent Display Grade" />
                    </div>
                </div>
                <div class="form-group row required">
                    <label for="hitCode" class="col-sm-2 col-form-label"> Hit
                        Code</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="hitCodeModal"
                            placeholder="Hit Code" />
                    </div>
                </div>
                <div class="form-group row required">
                    <label for="hitCodeResponse" class="col-sm-2 col-form-label">
                        Hit Code</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="hitCodeResponseModal"
                            placeholder="Hit Code Response" />
                    </div>
                </div>
                <div class="form-group row required">
                    <label for="approvalTypeListModal" class="col-sm-2 col-form-label">Approval
                        Type</label> <select id="approvalTypeListModal" class="form-control">
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary"
                    data-dismiss="modal">Cancel</button>
                <button class="btn btn-success"
                    id="submitEditModalData">Save</button>
            </div>
        </div>

    </div>
</div>

在模式中，所有表单输入都是内嵌水平，但select标签显示在标签下方，并且不与标签内联。有人可以帮我把选择框排成一行而不是标签下面。

Answer 1

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="form-group row required">
    <label for="approvalTypeListModal" class="col-md-2 col-sm-2 col-xs-2 col-form-label">Approval
       Type
    </label> 
    <div class="col-md-10 col-sm-10 col-xs-10">
       <select id="approvalTypeListModal" class="form-control">
           <option value="option1">Option1</option>
       </select>
                </div>
</div>

＆＃13;

你忘记了上课 col-md - * 。您可以将其放在select标记中，也可以创建一个新的div并将其提供给该类。

希望这有帮助。

在模态中的形式的线视图

1 个答案: