模态高度不增加

时间:2015-07-17 10:34:10

标签: html css twitter-bootstrap-3

我有一个模态,如下所示:

enter image description here

模态必须足够大,以使第一个文本字段和检查按钮彼此相邻,第二个文本字段和复选按钮彼此相邻。我试图增加模态的高度和宽度,但成功地只增加了宽度。当尝试自定义模态大小时,高度变小。使用modal-lg具有相同的效果。我的代码如下:

<div id="addQueue" class="modal fade" role="dialog">
    <div class="modal-dialog addqueue-modal">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add a Queue to your Desk</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <div class="col-sm-7">
                            <label for="queuename">Name your Queue: </label>
                            <input type="text" class="form-control" id="queuename">
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" value="closedqueue">Create a Closed Queue; Open when ready</label>
                        </div>

                        </div>
                        <div class="form-group">
                            <div class="col-md-7">
                                <label for="queueinfo">Additional information about the Queue: </label>
                                <input type="text" class="form-control" id="queueinfo">
                            </div>
                            <span class="checkbox">
                                <label><input type="checkbox" value="tooltipdisplay">Display as tooltip when hovering over the Queue</label>
                            </span>
                        </div>
                        <hr>
                </form>
            </div>
        </div>
    </div>
</div>

相关的CSS如下:

.addqueue-modal{

    width: 1000px;
    max-height: 1000px;
}

有谁知道如何修复我的模态,让我的文本字段和复选框与前面描述的相同?提前谢谢!

1 个答案:

答案 0 :(得分:0)

试试这个

.addqueue-modal{
    width: 1000px;
    max-height: 1000px;
    overflow-y: auto;
}