Bootstrap-input-Gruppe steuert mehr

Question

Ich habe Probleme mit den Kontrollen ausrichtet. Im oberen Bild ist, wie es ist, und unter so genau: https://i.stack.imgur.com/MPfhj.png

https://jsfiddle.net/jvcunha/1v4zay3h/

<div> 
    <div class="input-group"> 
     <input type="text" class="form-control" value="123456789" /> 
     <span class="input-group-addon btn">Delete</span> 
     <span class="input-group-addon btn">Update</span> 
     <span class="input-group"> 
      <input type="text" class="form-control" value="123456" /> 
      <input type="text" class="form-control xp" value="AA" /> 
     </span> 
    </div> 
</div> 

Answer 1

Edit 2: Stellen Sie die unten Notwendige

HTML

<div class="container"> 
    <div class="col-lg-offset-3 col-lg-6"> 
     <div class="input-group"> 
      <label for="f1">Field 1</label> 
      <input type="text" class="form-control" value="123456789" style="width:90px;"> 
      <span class="input-group-btn"> 
      <button class="btn btn-default" type="button">Delete</button> 
      <button class="btn btn-default" type="button">Update</button> 
      </span> 
      <label for="f2">Field 2</label> 
      <input type="text" class="form-control" value="123456"> 
      <span class="input-group-btn" style="width:0px;"></span> 
      <label for="f3">Field 3</label> 
      <input type="text" class="form-control" value="AA"> 
     </div> 
     </div> 
    </div> 

ändert

CSS

body { 
    margin: 10px; 
} 


.xp { 
     min-width: 50px; 
} 

.btn{ 
border-radius:0px !important; 
} 

.input-group-btn { 
    padding-top: 25px; 
} 

JSFiddle