Wie RadioButton Breite die gleiche für unterschiedliche Breite Spalten machen

Ich habe Probleme, den Radio Button Bereich (Input-Group-Addon) die gleiche Größe in col-sm-4 und col-sm-6 Spalten. Ich habe mir andere Antworten angesehen, bei denen die Leute eine minimale Breite benutzten und diese Lösung hat nicht funktioniert. Ich möchte eine einheitliche Breite für meine Radio-Button-Steuerung. Hier ist ein visuelles Beispiel. Meine erste Radiobutton (Input-group-Add-on) breiter ist als die zweite Eingabe-Gruppen imgur link Wie RadioButton Breite die gleiche für unterschiedliche Breite Spalten machen

.form-control { 
 
    width: 150px; 
 
} 
 

 
.radio-width { 
 
    width: 30px; 
 
}

<div class="container"> 
 
    <div class="form-group"> 
 
    <div class="col-sm-4"> 
 
     <div class="input-group"> 
 
     <span class="input-group-addon radio-width"> 
 
      <span class="control-label"> 
 
      <input type="radio" name="anyDate" value="anyDate"> 
 
      </span> 
 
     </span> 
 
     <div class="input-group-addon"> 
 
      <input type="text" class="form-control">   
 
     </div>        
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <div class="input-group"> 
 
     <span class="input-group-addon radio-width"> 
 
      <span class="control-label"> 
 
      <input type="radio" name="dateRange" value="dateRange"> 
 
      </span> 
 
     </span> 
 
     <div class="input-group-addon"> 
 
      <input type="text" class="form-control">  
 
     </div>       \t \t \t 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <input type="submit" value="Submit" class="btn btn-primary"> 
 
    </div> 
 
    </div> 
 
</div>

hier ist die Geige https://jsfiddle.net/DTcHh/20504/

Quelle

2016-05-12 Bob Asdfasdf

Nicht sicher, was Sie wollen, der tatsächliche Radio Kreis und Textfeld Quadrat sollte die gleiche Größe sein? Oder die Box, die sie enthält? Wenn Letzteres, können Sie einfach alle Eingänge mit der gewünschten Breite stylen: input {width: 50%;} –

Ja, obwohl das zweite Eingangsgruppen-Addon wirklich breit sein wird. Ich möchte, dass die Radiotasten die gleiche Breite haben. –

@RachelS Ich habe auf Ihre Lösung aktualisiert, Sie können gerne antworten und ich werde gerne meine löschen. – zer00ne

Ich glaube, Sie machen ein bisschen Verwirrung mit Input-Group-Addon-Element. Ein input-group-addon sollte wie folgt codiert werden:

<div class="input-group"> 
    <span class="input-group-addon" id="basic-addon1">@</span> 
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> 
</div>

Daher Code sein sollte:

<div class="input-group"> 
    <span class="input-group-addon"> <!-- don't need radio-width --> 
     <input type="radio" name="anyDate" value="anyDate"> 
    </span> 
    <input type="text" class="form-control input-full">  
</div>

Fiddle here.

Quelle

2016-05-12 22:02:08 Yuri

Wie RadioButton Breite die gleiche für unterschiedliche Breite Spalten machen

Antwort

Verwandte Themen