Wie schafft man Platz zwischen Elementen?

Question

Ich benutze bootstrap3 in meinem Projekt.

Ich habe diese HTML-Elemente:

<form class="form-inline"> 
     <div class="form-group"> 
      <div class="input-group"> 

       <span class="input-group-addon">from-</span> 
       <input id="input1" class="form-control input-sm" type="text/> 

       <!--How can I make here space--> 

       <span id="span2" class="input-group-addon">to-</span 
       <input class="form-control input-sm" type="text" /> 
      </div> 
     </div> 
    </form> 

Hier PLUNKER arbeiten.

Wie Sie sehen können, habe ich Spannen und Eingaben innerhalb Formelement. Wie kann ich Abstand zwischen Element mit ID = input1 und span mit ID = "Span2" machen?

Answer 1

Sie könnten ein anderes Element in es verwenden, wie:

<div id="spacer"></div> 

mit einem Stil wie

#spacer { width: 14px; display:table-cell;} 

Answer 2

Das Problem war, mit, wie Sie Elemente gruppieren. Wickeln Sie einfach jede Ihrer Spannweite und Eingang mit einem div, die class="input-group"

Hier ist die codepen

HTML hat

<form class="form-inline"> 
    <div class="form-group"> 
    <div class="input-group"> 
     <span class="input-group-addon">from-</span> 
     <input id="input1" class="form-control input-sm" type="text" /> 
    </div> 

     <!--How can I make here space--> 
     <div class="input-group"> 
     <span id="span2" class="input-group-addon">to-</span> 
     <input class="form-control input-sm" type="text" /> 
     </div> 

    </div> 
</form>