Question

我在项目中使用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>

以下是Visual Studio Code。

正如你所看到的，我在表单元素中有跨度和输入。如何在id = input1的元素和span =＆＃34; span2＆＃34;？

之间创建空格

Answer 1

问题在于你如何对元素进行分组。只需使用class="input-group"

的div包装每个范围和输入

以下是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>

Answer 2

您可以在其中添加其他元素，例如：

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

具有类似

的风格

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

如何在元素之间留出空间？

2 个答案: