Плавающие метки на начальной загрузке 5 не работают

#html #css #bootstrap-5

Вопрос:

Мои плавающие этикетки не работают, может кто-нибудь помочь мне?

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

Код

 <div class="form-floating mb-3">
    <input type="text" class="form-control" autofocus id="txtNome" placeholder=" ">
    <label for="txtNome">Full Name</label>
</div>
<div class="form-floating mb-3">
    <input type="email" class="form-control" autofocus id="txtEmail" 
        placeholder=" ">
    <label for="txtEmail">E-mail</label>
</div>
<div class="form-floating mb-3">
    <textarea class="form-control" id="txtMensagem" placeholder=" " 
              style="height: 200px;"></textarea>
    <label for="txtMensagem">Message</label>
</div> 

Ответ №1:

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

 <head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
 <body>
 <div class="form-floating mb-3">
                        <input type="text" class="form-control" autofocus id="txtNome" placeholder=" ">
                        <label for="txtNome">Full Name</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control" autofocus id="txtEmail" placeholder=" ">
                        <label for="txtEmail">E-mail</label>
                    </div>                  
                    
                    <div class="form-floating mb-3">
                        <textarea class="form-control" id="txtMensagem" placeholder=" " style="height: 200px;" ></textarea>
                        <label for="txtMensagem">Message</label>
                    </div>
</body> 

Вы можете перейти по ссылке CDN для начальной загрузки, используя это https://getbootstrap.com/docs/5.0/getting-started/introduction/

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

1. Пожалуйста. Если мой ответ вам помог, вы можете отметить это как правильный ответ или проголосовать за него. Это может быть полезно для другого.

Ответ №2:

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 

Добавьте это