如何減少自舉輸入元素之間的差距

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％」屬性的選擇器列表中。快樂的黑客攻擊。