如何减少自举输入元素之间的差距

Question

我想减少表单输入元素之间的差距。

DEMO

HTML：

<form class="form-horizontal width-500 center-block theme-font" role="form"> 
    <div class="form-group form-group-sm"> 

     <label for="name" class="control-label col-xs-4">Guardian Name</label> 
     <div class="col-xs-3 form-inline"> 
      <select class="form-control" id="village" required="required"> 
       <option>S/O</option> 
       <option>D/O</option> 
       <option>W/O</option> 
       <option>C/O</option> 
      </select> 
      <div class="required-icon"> 
       <div class="text">*</div> 
      </div> 
     </div> 

     <div class="col-sm-5 form-inline float-left"> 
      <input class="form-control" required="required" id="name" placeholder="Guardian Name" type="text"> 
      <div class="required-icon"> 
       <div class="text">*</div> 
      </div> 
     </div> 

    </div> 
</form> 

Answer 1

如果你想获得哈克与它（将要在以后的其他输入类型添加），您可以添加此的CSS：

select, input { 
    min-width: 100%; /* Force element to take up the whole column width */ 
} 

.required-icon { 
    position: absolute; /* Allow icon to stack within the 100% min-width input fields */ 
    right: 0; /* Force it to the right side of the block */ 
    top: 4px; /* Quick position fix */ 
} 

.tooltip { 
    left: -70px !important; /* Override and bring the tooltip behind the input fields */ 
} 

希望这会有所帮助。喜欢上面提到的，你将不得不将额外的输入字段（textarea等）添加到追加“min-width：100％”属性的选择器列表中。快乐的黑客攻击。