Выравнивание элементов формы




CSS, HTML - отвечаем на вопросы, обсуждаем проблемы и даем советы.

Новичок

Сообщения: 1

Зарегистрирован: 15 мар 2017, 14:48

Баллы репутации: 0

Сообщение AlexTrader » 15 мар 2017, 14:54

Выравнивание элементов формы

Доброго времени суток, форумчане! Подскажите пожалуйста, как выравнять элементы формы в две колонки с помощью bootstrap.
Вот пример моей формы:

  Код:
<div id="edit-cost-window" style="display: none;">
    <div id="edit-cost">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="form-inline">
                    <div class="form-group">

                                    <label for="DocTime">
                                        <span class="required-label">*</span> Дата документа:
                                        <input id="DocTime" data-role="datetimepicker" data-bind="value: DocTime">
                                    </label>

                            <label for="agentId-organization"><span class="required-label">*</span> Организация:</label>
                            <input data-role="autocomplete"
                                   data-text-field="title"
                                   data-placeholder="Введите организацию"
                                   data-bind="value: AgentId_Organization,
                                source: Organizations,
                                @*enabled: clientGroup.patients.enabled,*@
                                events: {dataBound: dataBound}"
                                   id="agentId-organization" />
                            <hr />

                                <div id="CashFundAccountId-container" style="float: left;">
                                    <label for="CashFundAccountId"><span class="required-label">*</span> Источник</label>

                                    <input type="text" id="CashFundAccountId" class="treeview-in-dropdown" name="CashFundAccountId" data-bind="value: CashFundAccountId" style="display: none;" />
                                    <input type="text" id="CashFundAccountTitle" class="treeview-in-dropdown k-textbox" data-field="CashFundAccountTitle" name="CashFundAccountTitle"
                                           data-bind="value: CashFundAccountTitle" autocomplete="off" placeholder="введите источник..." style="width: 300px;" />
                            </div>

                            <div id="GoalBdrRefId-container" style="float: left;">
                                <label for="GoalBdrRefId"><span class="required-label">*</span> Цель</label>

                                <input type="text" id="GoalBdrRefId" class="treeview-in-dropdown" name="GoalBdrRefId" data-bind="value: GoalBdrRefId" style="display: none;" />
                                <input type="text" id="GoalBdrRefIdTitle" class="treeview-in-dropdown k-textbox" data-field="GoalBdrRefIdTitle" name="GoalBdrRefIdTitle"
                                       data-bind="value: GoalBdrRefIdTitle" autocomplete="off" placeholder="введите цель..." style="width: 300px;" />
                            </div>
                            <br />
                            <br />
                            <hr />

                                <label for="AgentId_Recipient"><span class="required-label">*</span> Контрагент:</label>
                                <input data-role="autocomplete"
                                       data-text-field="title"
                                       data-placeholder="Введите контрагента"
                                       data-bind="value: AgentId_Recipient,
                                            source: Agents,
                                            @*enabled: clientGroup.agents.enabled,*@
                                            events: {dataBound: dataBound}"
                                       id="agent" />

                            <label for="AgentId_Crucial"><span class="required-label">*</span> Ответственный:</label>
                            <input data-role="autocomplete"
                                   data-text-field="title"
                                   data-placeholder="Введите ответственного"
                                   data-bind="value: AgentId_Crucial,
                                            source: Agents,
                                            @*enabled: clientGroup.agents.enabled,*@
                                            events: {dataBound: dataBound}"
                                   id="agent" />
                            <hr />

                                <label for="TimeInput">
                                    <span class="required-label">*</span> Введено:
                                    <input id="TimeInput" data-role="datetimepicker" data-bind="value: TimeInput">
                                </label>

                            <label for="TimeChange">
                                <span class="required-label">*</span> Изменено:
                                <input id="TimeChange" data-role="datetimepicker" data-bind="value: TimeChange">
                            </label>
                            <hr />

                            <label for="DocPrice">Сумма:</label>
                            <input data-role="numerictextbox"
                                   data-format="n2"
                                   data-min="0"
                                   data-max="100"
                                   data-bind="value: DocPrice"
                                   id="DocPrice" />

                            <input type="checkbox" id="IsDraft" name="IsDraft" class="k-checkbox" data-bind="checked: IsDraft">
                            <label class="k-checkbox-label" for="IsDraft" style="margin-bottom: 15px;">Черновик</label>

                        </div>
                </div>
            </div>
        </div>
        <hr />
        <div class="pull-right">
            <button class="btn btn-primary" data-bind="events: {click: save}, disabled: saveDisabled">Сохранить</button>
            <button class="btn btn-default" data-bind="events: {click: close}">Отменить</button>
        </div>
    </div>
    </div>

Аватара пользователя

Администратор

Сообщения: 4966

Зарегистрирован: 22 янв 2011, 16:48

Баллы репутации: 203

Сообщение Серега » 06 апр 2017, 06:51

А какая версия бутстрапа?

Вернуться в Верстка сайтов

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron

Как создать свой сайт самому?
Обучение компьютеру | Контакты | Партнёрская программа | Магазин | Подписка на уроки