Как сделать так, чтобы некоторые вещи не оборачивались в адаптивную форму?

Я пытаюсь создать отзывчивую форму, в которой одни вещи переносятся, а другие нет.

Я хотел бы, чтобы форма выглядела так на рабочем столе

введите здесь описание изображения

и нравится это на мобильном телефоне

введите здесь описание изображения

Обратите внимание, что значок остается справа. К сожалению, я не могу использовать фоновое изображение для значка, так как мне нужно показывать всплывающую подсказку при наведении на значок.

Однако, когда я пытаюсь это сделать, значок переносится:

введите здесь описание изображения

Итак, как я могу сделать значок отдельным элементом (span или div), но не обернуть его ниже текстового поля?

Вот одна из попыток: http://jsfiddle.net/XVu6V/

И вот попытка Bootstrap 3: http://jsfiddle.net/syhLJ/1/ I очень хотел бы использовать Bootstrap.

Вот немного HTML:

<div text-element class="form-group row">
    <label for="firstName" class="col-md-2 control-label">First Name</label>
    <div class="col-md-5">
        <input type="text" class="form-control" id="firstName" />
    </div>
    <div class="col-md-1 validation-icon required"></div>
    <div class="col-md-3 validation-message">
        Needed for communication.
    </div>
</div>

html css responsive-design
person Chad Johnson    schedule 28.04.2014    source источник
comment
Вы можете использовать фоновое изображение и по-прежнему отображать всплывающую подсказку. Просто установите его в div вместо тега ‹img›.   -  person Andrei Volgin    schedule 29.04.2014

Ответы (5)


arrow_upward
1
arrow_downward

Вы можете складывать col-xx-xx вместе, не переопределяя стили начальной загрузки по умолчанию.

http://jsfiddle.net/99SFW/2/

<div class="container">
    <form class="form-horizontal" role="form">
        <div text-element class="form-group row">
            <label for="firstName" class="col-md-2 col-sm-2 col-xs-12 control-label">First Name</label>
            <div class="col-md-5 col-sm-5 col-xs-9">
                <input type="text" class="form-control" id="firstName" />
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1 validation-icon required"></div>
            <div class="col-md-3 col-sm-12 col-xs-12 validation-message">Needed for communication.</div>
        </div>
    </form>
</div>

введите здесь описание изображения

person Win    schedule 28.04.2014
comment
Хороший!!! Кажется, это работает хорошо. И после добавления всплывающих подсказок они также отображаются в правильном положении. Спасибо чувак! - person Chad Johnson; 29.04.2014

arrow_upward
4
arrow_downward

Почему бы не обернуть значок и <input> внутри div, установить для этого div значение position:relative и добавить padding-right той же ширины, что и значок. Затем установите ширину <input> 100% и значок position:absolute;top:0;right:0? Это заставит значок всегда находиться справа от <input>.

Что-то вроде http://jsfiddle.net/syhLJ/7/.

Вы можете просмотреть только его предварительный просмотр в формате HTML по адресу http://fiddle.jshell.net/syhLJ/7/show/, я довольно часто использую это решение, и до сих пор оно никогда не подводило.

person dotty    schedule 28.04.2014
comment
Поскольку я не хотел использовать бутстрап, ваш ответ помог в моем случае. Спасибо. - person Robert; 13.03.2017

arrow_upward
1
arrow_downward

Не совсем оптимально, но вы можете попробовать абсолютно позиционировать ввод и перемещать его влево на меньшем экране, перемещая значок вправо. Затем, я думаю, сделайте ввод в процентах, который даст вам некоторое расстояние между ним и значком.

.form-group .form-control {
    position: absolute;
    float: left;
}
person Telemachus    schedule 28.04.2014

arrow_upward
0
arrow_downward

Я обновил вашу скрипту здесь

HTML выглядит примерно так...

<form>
    <div>
        <label for="firstName" class="label">First Name</label>
        <div class="input">
            <input type="text" class="form-control" id="firstName" />
        </div>
        <div class="icon">R</div>
        <div class="validation">Needed for communication.</div>
    </div>
</form>

И CSS

.input {
    float: left;
    width:calc(100% - 35px);
    max-width: 500px;
}
.icon {
    float: left;
    background-color: orange;
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 4px;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    color: white;
    font-weight: bold;
}

.validation {
    float: left;
}
person spacemigas    schedule 28.04.2014

arrow_upward
0
arrow_downward

Или вы можете переместить кнопку вправо и перетащить ее вверх с отрицательным полем.

.form-group .validation-icon {
  float: right;
  margin-top: -33px;
}
@media (min-width: 992px) {
  .form-group .validation-icon {
    float: left;
    margin-top: 0;    
  }
}
.form-control {
    width: 90%;
}

http://jsfiddle.net/Anp7s/2/

person Kunsang    schedule 28.04.2014