Groupe de saisie d'espace réservé et de groupe d'amorçage adaptatif

Question

J'essaie d'utiliser les fichiers CSS adaptatifs sur ma page. Cela fonctionne parfaitement pour les entrées de texte et de sélection, mais lorsque j'essaie de l'utiliser avec le groupe d'entrée bootstraps, cela ne fonctionne pas. travail.

J'ai créé un bootply pour montrer ce que je veux dire bootply (celui du milieu est ce que je veux ressembler)

C'est l'entrée-groupe qui ne prend pas l'espace réservé adaptatif

<div class="row"> 
    <div class="col-sm-6"> 
     <div id="divSupplierInput2" class="input-group"> 
      <input class="form-control" type="text" id="Text2" name="txtSupplier" value="" runat="server" 
       required=""> 
      <label for="txtSupplier" placeholder="Supplier"> 
      </label> 
      <span class="input-group-btn"> 
       <button class="btn btn-secondary btn-sm" type="button"> 
        ...</button> 
      </span> 
     </div> 
    </div> 
</div> 

et c'est une entrée où il ne fonctionne

<div class="row"> 
<div class="col-sm-6"> 
    <input id="Text1" type="text" class="form-control input-sm" runat="server" required=""> 
    <label for="txtInvoiceNumber" placeholder="Invoice Number"> 
    </label> 
</div> 

toute aide serait grandement appréciée, acclamations

Answer 1

Utilisez deux divs, col-sm-5 Adjust-Span-gauche et col-sm-1 Ajusteur durée droite. Vous pouvez également utiliser col-sm-6 à col-sm-11 en fonction de la durée souhaitée. note I ajouté ajuster travée gauche et ajuster travée droite aux divs respectivement, utilisez maintenant CSS pour l'ajuster en conséquence:

.adjust-span-right{ 
    margin-left: -40px; 
} 
/* To make it responsive to smaller screens add this */ 
@media screen and (max-width: 780px) { 
    .adjust-span-left{ 
    float:left; 
    width:90%; 
    overflow:hidden; 
    } 
    .adjust-span-right{ 
    float:left; 
    width:10%; 
    overflow:hidden; 
    } 
} 

Utilisez ensuite cette entrée

<div class="row"> 
    <div class="col-sm-5 adjust-span-left"> 
    <input id="txtInvoiceNumber" type="text" class="form-control input-sm" runat="server" required=""> 
    <label for="txtInvoiceNumber" placeholder="Invoice Number"> 
    </label> 
    </div> 
    <div class="col-sm-1 adjust-span-right"> 
    <span class="input-group-btn"> 
     <button class="btn btn-secondary btn-sm" type="button"> 
      ... 
     </button> 
    </span> 
    </div> 
</div> 

EDIT J'ai remarqué que l'espace réservé ne s'affiche pas sur le petit écran de mise au point, donc vous devez également ajuster le css pour cela dans le style css responsive.

Quelque chose comme:

@media screen and (max-width: 780px) { 
input[type="text"][required]:focus + label[placeholder]:before, 
input[type="text"][required]:valid + label[placeholder]:before { 
    /* Adjust the css accordingly */ 
    -webkit-transform: translate(6px, -10px); 
    -ms-transform: translate(6px, -10px); 
    transform: translate(8px, -10px); 
} 
}