Comment utiliser le pourcentage de largeur (%) pour le texte?

Question

J'ai une zone de texte et une étiquette. Je veux afficher côte à côte et vouloir agrandir: 100% pour le texte (donc j'ai besoin de ceci: la largeur du texte change quand le format de la page change) mais je ne l'ai pas fait.

ceci est mon code:

<div class="col-xs-6 col-md-6"> 
    <div class="form-group clearfix"> 
     <label for="UxSearch">Search:</label> 
     <input type="text" name="UxSearch" id="UxSearch" class="form-control"/> 
    </div> 
</div> 

et c'est ma classe css:

form-group { 
    margin-bottom: 15px; 
} 

.form-control { 
    display: block; 
    width: 100%; 
    height: 29px; 
    padding: 6px 12px; 
    font-size: 12px; 
    line-height: 1.25; 
    color: #555555; 
    background-color: #ffffff; 
    background-image: none; 
    border: 1px solid #cccccc; 
    border-radius: 0px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
} 

largeur: 100% des œuvres, mais le texte et l'étiquette ne sont pas dans l'alignement (comme photo)

mais c'est ce que je veux:

J'ai essayé d'afficher: inline-block mais pas arrivé.

Pouvez-vous m'aider s'il vous plaît?

Answer 1

col-xs-6 dans des moyens div mobiles auront une largeur Hafl de l'écran du dispositif (< 768px)

.form-group { 
 
display:inline-flex; 
 
width:100%; 
 

 
} 
 
.form-control { 
 
display: block; 
 

 
height: 29px; 
 
padding: 6px 12px; 
 
font-size: 12px; 
 
line-height: 1.25; 
 
color: #555555; 
 
background-color: #ffffff; 
 
background-image: none; 
 
border: 1px solid #cccccc; 
 
border-radius: 0px; 
 
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
 
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
 
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="col-xs-6 col-md-6"> 
 
<div class="form-group clearfix"> 
 
    <label for="UxSearch">Search:</label> 
 
    <input type="text" name="UxSearch" id="UxSearch" class="form-control"/> 
 
</div> 
 
</div>