引导面板类捕获以上div的内容

时间:2018-06-28 14:51:48

标签: html twitter-bootstrap

我有2个div,一个有panel引导类,另一个没有,我需要将此panel div放在常规的下面。现在看起来像这样:

first_pic

但是当我将panel的div放到常规的div之下时,我得到以下信息:

2nd pic

因此,上限内容受panel div的限制。代码如下:

<div class="container">
<div class="form_container" style="float:left;">
        <div class="form-group col-md-12" style="margin-top: 20px;">
            <div class="col-md-6">
                <div class="input-group pull-left">
                    <input id="message" type="text" class="form-control" placeholder="Введите фразу и нажмите Enter" autofocus="" autocomplete="off">
                    <span class="input-group-btn">
                        <button class="btn btn-default btn-add" type="button" id="chat_send">Отправить</button>
                    </span>
                </div>
            </div>
            <div class="form-group col-md-6">
                <label for="server" class="col-xs-2 control-label" style="padding-left: 14%;padding-right: 10%;margin-top: 5px;">Сервер</label>
                <div class="col-md-8">
                    <select class="form-control" id="server" name="server_field">
                        {% for server_addr in server_address %}
                        {% for k, v in server_addr %}
                            <option value="{{ v }}">{{ k }}</option>
                        {% endfor %}
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>
   </div>

    <div class="panel panel-default" style="margin-top: 1%;" >
        <div class="panel-body" style="padding-top: 0;padding-bottom: 0;">

            <div class="form-group col-md-8" style="margin-top:12px;">
                <label for="phrase_group" class="col-xs-3 control-label" style="margin-top: 5px;">Выберите группу</label>
                <div class="col-md-8">
                    <select class="form-control" id="phrase_group" name="phrase_group" style="width:40%; float:left;">
                        <option value="{{ group.id }}">{{ group.phraseset }}</option>
                        {% for group in group_phrases %}
                            <option value="{{ group.id }}">{{ group.phraseset }}</option>
                        {% endfor %}
                    </select>
                    <button id="test_phraseset" class="btn btn-primary" style="margin-left: 10%;" data-id="2">Тест</button>
                    <button id="clear_phraseset" class="btn btn-primary" style="margin-left: 7%;" data-id="2">Очистить</button>
                </div>
            </div>

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

有什么办法解决该问题吗?谢谢。

0 个答案:

没有答案