• XSS.stack #1 – первый литературный журнал от юзеров форума

bootstrap

Отслеживать

html5

CD-диск
Пользователь
Регистрация
11.08.2020
Сообщения
19
Реакции
1
всем привет, имею форму с таким содержимым:

HTML: 
            <div class="form-group">
              <label for="input-data">
                <h6>Тестовый лейбл:</h6>
              </label>

              <input type="text" id="input-data" class="form-control mx-auto w-50" required>
              <small class="form-text text-muted"> Тестовая надпись</small>
            </div>

проблема заключается в том, что на телефонах при использовании w-50 - input'ы выглядят маленькими
подскажите пожалуйста, как сделать инпуты с равномерным отображением на всех устройствах
 
Пожалуйста, обратите внимание, что пользователь заблокирован
Я не дизайнер , но мб поиграться с классами .visible-xs, hidden-xs ? Т.е. одни инпуты показывать на мобильных, вторые на обычных устройствах?
 
Quake3 сказал(а):
Я не дизайнер , но мб поиграться с классами .visible-xs, hidden-xs ? Т.е. одни инпуты показывать на мобильных, вторые на обычных устройствах?
можно сделать, но выглядит как костыль. в идеале сделать сразу адаптивное решение
 
Используй задать свойство min-width. Тогда на мобильных устройствах оно не будет становиться слишком маленьким.
 
Еще одна проблема. Пишу checkout форму, нужно реализовать ввод номера карты, expiration date и cvv.

Безымянный.png


Кусок кода, отвечающий за эти поля:

HTML: 
<div class="d-flex justify-content-center">
            <div class="form-group col-8 col-sm-7 col-md-8 col-lg-7">
                <div class="text-center">
                    <label for="">Enter your card credentials:</label>
                </div>
                <input type="text" name="" id="input-cc" class="form-control text-center" placeholder="0000 0000 0000 0000">
            </div>
        </div>

        <div class="d-flex justify-content-center mb-4">     
            <div class="row col-4 col-sm-4s col-md-3">
                <input type="text" name="" id="input-expiration-date" class="form-control text-center" placeholder="00/00">
            </div>

            <div class="row col-4 col-sm-4 col-md-3 ml-1">
                <input type="text" id="input-cvv" class="form-control text-center" placeholder="000">
            </div>   
        </div>

Подскажите пожалуйста, как добавить label'ы над каждым из нижних инпутов? В связи с использованием row, label'ы идут в ряд, а мне нужно сверху.
 
html5 сказал(а):
Еще одна проблема. Пишу checkout форму, нужно реализовать ввод номера карты, expiration date и cvv.

Посмотреть вложение 13259

Кусок кода, отвечающий за эти поля:

HTML: 
<div class="d-flex justify-content-center">
            <div class="form-group col-8 col-sm-7 col-md-8 col-lg-7">
                <div class="text-center">
                    <label for="">Enter your card credentials:</label>
                </div>
                <input type="text" name="" id="input-cc" class="form-control text-center" placeholder="0000 0000 0000 0000">
            </div>
        </div>

        <div class="d-flex justify-content-center mb-4">    
            <div class="row col-4 col-sm-4s col-md-3">
                <input type="text" name="" id="input-expiration-date" class="form-control text-center" placeholder="00/00">
            </div>

            <div class="row col-4 col-sm-4 col-md-3 ml-1">
                <input type="text" id="input-cvv" class="form-control text-center" placeholder="000">
            </div>  
        </div>

Подскажите пожалуйста, как добавить label'ы над каждым из нижних инпутов? В связи с использованием row, label'ы идут в ряд, а мне нужно сверху.

Может я чего либо не понял, но...
HTML: 
        <div class="d-flex justify-content-center">
            <div class="form-group col-8 col-sm-7 col-md-8 col-lg-7">
                <div class="text-center">
                    <label for="">Enter your card credentials:</label>
                </div>
                <input type="text" name="" id="input-cc" class="form-control text-center" placeholder="0000 0000 0000 0000">
            </div>
        </div>

        <div class="d-flex justify-content-center mb-4">     
            <div class="row col-4 col-sm-4s col-md-3">
                <div class="text-center">
                    <label for="">Enter expiration date:</label>
                </div>
                <input type="text" name="" id="input-expiration-date" class="form-control text-center" placeholder="00/00">
            </div>

            <div class="row col-4 col-sm-4 col-md-3 ml-1">
                <div class="text-center">
                    <label for="">Enter cvv:</label>
                </div>
                <input type="text" id="input-cvv" class="form-control text-center" placeholder="000">
            </div>   
        </div>
qwe123.png
 
pxEx0Z сказал(а):
Может я чего либо не понял, но...
HTML: 
        <div class="d-flex justify-content-center">
            <div class="form-group col-8 col-sm-7 col-md-8 col-lg-7">
                <div class="text-center">
                    <label for="">Enter your card credentials:</label>
                </div>
                <input type="text" name="" id="input-cc" class="form-control text-center" placeholder="0000 0000 0000 0000">
            </div>
        </div>

        <div class="d-flex justify-content-center mb-4">    
            <div class="row col-4 col-sm-4s col-md-3">
                <div class="text-center">
                    <label for="">Enter expiration date:</label>
                </div>
                <input type="text" name="" id="input-expiration-date" class="form-control text-center" placeholder="00/00">
            </div>

            <div class="row col-4 col-sm-4 col-md-3 ml-1">
                <div class="text-center">
                    <label for="">Enter cvv:</label>
                </div>
                <input type="text" id="input-cvv" class="form-control text-center" placeholder="000">
            </div>  
        </div>
Посмотреть вложение 13264
Забыл упомянуть, все это лежит в карте с классом "card col col-sm col-md-9 col-lg-6 col-xl-6 mx-auto mt-3"
У меня приведенный выше код выглядит так:

Безымянный.png
 
HTML: 
<div class="d-flex justify-content-center">
            <div class="form-group col-12 col-sm-7 col-md-8 col-lg-7">
                <div class="text-center">
                    <label for="">Enter your card credentials:</label>
                </div>
                <input type="text" name="" id="input-cc" class="form-control text-center" placeholder="0000 0000 0000 0000">
            </div>
        </div>

        <div class="d-flex justify-content-center mb-4">   
            <div class="row col-12 col-sm-4 col-md-3">
                <div class="text-center">
                    <label for="">Enter expiration date:</label>
                </div>
                <input type="text" name="" id="input-expiration-date" class="form-control text-center" placeholder="00/00">
            </div>

            <div class="row col-12 col-sm-4 col-md-3 ml-1">
                <div class="text-center">
                    <label for="">Enter cvv:</label>
                </div>
                <input type="text" id="input-cvv" class="form-control text-center" placeholder="000">
            </div> 
        </div>
 
admin


Напишите ответ...
  • Вставить:
Прикрепить файлы
Верх