Как сделать пробел между элементами?

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я использую bootstrap3 в своем проекте.

У меня есть эти html-элементы:

     <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>
  

Здесь работает PLUNKER.

Как вы можете видеть, у меня есть промежутки и входные данные внутри элемента формы.Как я могу сделать пробел между элементом с id = input1 и span с id = «span2»?

Ответ №1:

Проблема заключалась в том, как вы сгруппировали элементы. Просто оберните каждый из ваших интервалов и входных данных div, который имеет class="input-group"

Вот codepen

HTML

 <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>
  

Ответ №2:

Вы могли бы добавить туда еще один элемент, например:

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

с таким стилем, как

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