Блог

Главная - Вопросы по программированию - Как разместить значок даты после ввода средства выбора даты в начальной загрузке 5?

Как разместить значок даты после ввода средства выбора даты в начальной загрузке 5?

#html #bootstrap-5

Вопрос:

Я использую Bootstrap 5 и не могу заставить значок даты появиться после ввода выбора даты. Оно появляется под ним.

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

Это мой код:

 <form data-toggle="validator" class="container-fluid" role="form" id="gymUpdateForm">
    <div class="col-lg-12 col-md-12 col-sm-12 col-12 beta container-fluid">
    
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-7 col-12">
                <div class="row">
                    <label class="control-label control-label-left col-lg-3 col-md-3 col-sm-5 col-12" for="updateDescription">Description:<span class="req"> *</span></label>
                    <div class="controls col-lg-6 col-md-7 col-sm-7 col-12">
                        <input type="text" id="updateDescription" name="updateDescription" placeholder="Description">
                    </div>
                </div>
            </div>
        
            <div class="col-lg-3 col-md-3 col-sm-4 col-6">
                <div class="input-group">
                    <label class="control-label control-label-left col-lg-2 col-md-2 col-sm-2 col-2" for="updateArchive">Archived:</label>
                    <div class="date col-lg-5 col-md-7 col-sm-7 col-12" id="datepicker1">
                        <input type="text" class="form-control fullWidth" id="updateArchive" name="updateArchive" placeholder="DD/MM/YYYY">
                        <span class="input-group-addon" style="background-color:#ddd;">
                            <i class="fa fa-calendar" style="padding:5px;"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="container">                 
            <button type="submit" id="updateGym" class="btn btn-large btn-warning" >Update</button>
            <button type="button" id="cancelGym" class="btn btn-large btn-warning" >Return</button>
        </div>

    </div>
</form>

Комментарии:

1. Если бы он вообще не появлялся, и поскольку вы используете BootStrap 5 (я все еще предпочитаю Bootstrap 4, и я твердо верю, что подавляющее число веб — интерфейсов просто выигрывает от jQuery-никаких «если» / » и » / «но»), я бы предложил заменить fas fa-calendar : Значки даты и времени Font Awesome 5 . Вопрос: Вы пробовали поместить <input> и <i> то, и другое внутрь одного и того же <span> ?

2. Попробовал это и не изменил: <тип ввода=»текст» класс=»полная ширина элемента управления формой» идентификатор=»updateArchive» имя=»updateArchive» заполнитель=»ДД/ММ/ГГГГ»>

Ответ №1:

Ответ таков: входная группа

 <div class="input-group date col-lg-5 col-md-7 col-sm-7 col-12" id="datepicker1">

Комментарии:

1. У ВАС БЫЛА «группа ввода» … но вы поместили его не в тот раздел, верно?

2. @paulsm4 Ответ относится к Это та, в которую я добавил «группу ввода»: -). Я также изменю класс fa на fas, как вы предложили. С уважением, Глин

Ответ №2:

Когда я копирую этот код в свой редактор, фон #ddd отображается сразу рядом с полем ввода даты, а не под ним. Однако отображается только фон, без значка календаря, что странно. Это может быть связано с тем, что префикс класса для него должен быть FAS, а не FA (FA-более старая версия Font Awesome).

Комментарии:

1. Я попробовал фас и фас-календарь. FAS не меняет отображение, и fas-календарь не отображает значок. Я использую <link rel=»таблица стилей» href=» pro.fontawesome.com/releases/v5.10.0/css/all.css «>

2. В шрифте Awesome 5 префикс определенно FAS. Дело в том, что я тоже изо всех сил пытался воспроизвести вашу ошибку. Хотя значок не отображался, поле для него действительно отображается в правой части поля ввода, а не под ним.

3. @Глин — fas-calendar это НЕПРАВИЛЬНО . Вы хотите «fa-календарь» … но имя класса начальной загрузки 5 теперь «fas» вместо «fa»: <i class="fas fa-calendar"...> .

Метки: