Проблема с выравниванием элемента <select> HTML с Bootstrap 3

У нас есть следующий формуляр для поисковой службы, используя Bootstrap 3.

<form class="form-inline" action="#" method="POST"><div class="row">
    <div class="form-group form-group-inline">
        <label for="f_campo_1" class="form-group-inline">Campo 1:</label>
        <input id="f_campo_1" name="f_campo_1" type="text" maxlength="4" value=""
            class="form-control form-control-width-small"
        />
    </div>
    <div class="form-group form-group-inline" style="background-color: aqua">
        <label for="f_campo_2" class="form-group-inline">Campo 2:</label>
        <select id="f_campo_2" name="f_campo_2"
            class="form-control form-control-width-small"
        >
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
    <div class="form-group form-group-inline">
        <label for="f_campo_3" class="form-group-inline">Campo 3:</label>
        <input id="f_campo_3" name="f_campo_3" type="text" value=""
            class="form-control form-control-width-small"
        />
    </div>
    <div class="form-group form-group-inline">
        <label for="f_campo_4" class="form-group-inline">Campo 4:</label>
        <input id="f_campo_4" name="f_campo_4" type="text" value=""
            class="form-control form-control-width-extra-small"
        />
    </div>
    <div class="form-group form-group-inline">
        <label for="f_campo_5" class="form-group-inline">Campo 5:</label>
        <input id="f_campo_5" name="f_campo_5" type="text" value=""
            class="form-control form-control-width-extra-small"
        />
    </div>
    <div class="btn-group">
        <button id="btn_buscar" name="btn_buscar" type="button"
            class="btn btn-default"
        >
        <span class="glyphicon glyphicon-search"></span>&nbsp;Buscar</button>
        <button id="btn_limpiar" name="btn_limpiar" type="button"
            class="btn btn-default"
        >
        <span class="glyphicon glyphicon-refresh"></span>&nbsp;Limpiar</button>
    </div>
</div></form>

Мы добавили следующие классы добавочных CSS, чтобы мочь выравнивать поля вышеупомянутого формуляра и избегать того, чтобы их осталось одним под другим в подвижной версии:

.form-control-width-small {
    width: 57.6px !important;
}

.form-control-width-extra-small {
    width: 38.4px !important;
}

.form-group-inline {
    display: inline-block;
}

Мы присоединяем два задержания, как у нас остается элемент <select> desalineado относительно оставшейся части:

Так видят, не используя display: inline-block;:

Así se ve sin utilizar display: inline-block;

Так он продолжает использоваться display: inline-block;а именно .form-group-inline:

Así nos queda utilizando display: inline-block; , es decir, .form-group-inline

Мы рисовали кстати div контейнер label и select соответствующий с style="background-color: aqua" для того, чтобы было очевидно хорошо отклонение от прямой линии.

Мы понимаем, что Bootstrap 3 только применяет стили к элементам input. Это действительно так?

1
задан 27.01.2017, 17:24
0 ответов

Как комментируй, что @eezzekl ты был бы должен использовать рисунок из-за колонн. То, что ты хочешь использовать формуляра inline только он стоит тебе для того, чтобы поместить интерактивно label и input согласно документации. Если ты будешь хотеть, чтобы они держались один, на другом ты будешь должен использовать колонны. Я оставляю тебе пример посмотрим он подает тебя: https://jsfiddle.net / fforcen / u5c4byx7 / 2 /

Я оставляю тебя, как он остался бы с изменением:

<div class="container-fluid">
    <form class="form-inline" action="#" method="POST">
        <div class="row">
            <div class="form-group col-xs-4">
                <label for="f_campo_1" class="form-group-inline">Campo 1:</label>
                <input id="f_campo_1" name="f_campo_1" type="text" class="form-control form-control-width-small" maxlength="4" value="">
            </div>
            <div class="form-group col-xs-4" style="background-color: aqua">
                <label for="f_campo_2" class="form-group-inline">Campo 2:</label>
                <select id="f_campo_2" name="f_campo_2" class="form-control form-control-width-small">
                    <option value="1">A</option>
                    <option value="2">B</option>
                    <option value="3">C</option>
                </select>
            </div>
            <div class="form-group col-xs-4">
                <label for="f_campo_3" class="form-group-inline">Campo 3:</label>
                <input id="f_campo_3" name="f_campo_3" type="text" class="form-control form-control-width-small" value="">
            </div>
            <div class="form-group col-xs-4">
                <label for="f_campo_4" class="form-group-inline">Campo 4:</label>
                <input id="f_campo_4" name="f_campo_4" type="text" class="form-control form-control-width-extra-small" value="">
            </div>
            <div class="form-group col-xs-4">
                <label for="f_campo_5" class="form-group-inline">Campo 5:</label>
                <input id="f_campo_5" name="f_campo_5" type="text" class="form-control form-control-width-extra-small" value="">
            </div>
        </div>
        <div class="row">

            <div class="btn-group">
                <button id="btn_buscar" name="btn_buscar" type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>&nbsp;Buscar</button>
                <button id="btn_limpiar" name="btn_limpiar" type="button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span>&nbsp;Limpiar</button>
            </div>
        </div>
    </form>

</div>
1
ответ дан 03.12.2019, 17:28
  • 1
    Фернандо muchí пропасти спасибо, quedó выровненный элемент select поисковой службы, мы изменили капусту - xs-4 из-за капусты - xs-2, для того, чтобы не остались такими раздвинутыми поля в versió n рабочего стола. –  27.01.2017, 18:02
  • 2
    Мы будем пытаться с различными классами Bootstrap для каждого resolució n (lg, md, sm и xs) для того, чтобы он остался лучше. –  27.01.2017, 18:04