在 div 引导程序之间插入字符答案

【问题标题】：Insert character between div bootstrap在 div 引导程序之间插入字符
【发布时间】：2015-11-20 11:09:18
【问题描述】：

我有一个简单的行，其中有一个标签和两个输入类型号

<form class="form-horizontal">
  <br>
  <div class="container">
    <label class="col-sm-2 control-label">Numero documento:</label>
    <div class="col-sm-3">
      <input type="number" id="firstDocumentNumber" class="form-control">
    </div>
    <div class="col-sm-1">
      <input type="number" id="secondDocumentNumber" class="form-control">
    </div>
  </div>
</form>

我需要像这样在两个输入类型之间插入一个斜杠 (/)

有人可以帮帮我吗？这是我使用的代码Bootply

提前致谢

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。尽管您提供了一个示例的链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。另外链接不起作用
我没有注意到，我现在更正了。感谢您的报告！
您仍然需要在问题中包含代码...足够来展示您尝试过的内容。

标签： html css twitter-bootstrap character

【解决方案1】：

我发现最简单的方法是使用 CSS（使用 Bootstrap 4 尝试过）：

<div class="col-sm-1" id="secondDocumentNumberCont">
  <input type="number" id="secondDocumentNumber" class="form-control">
</div>

#secondDocumentNumberCont:before {
    content: '/';
    position: absolute;
    margin-left: -8px;
    line-height: 2.3em;
}

margin-left & line-height 可能需要一些调整。

【讨论】：

【解决方案2】：

您应该使用带有大小的跨度和格式，并按照您的喜好对齐..

<div class="site-index">
        <div class="body-content">
    <form class="form-horizontal">
      <br>
      <div class="container">
        <label class="col-sm-2 control-label">Numero documento:</label>
        <div class="col-sm-3">
          <input type="number" id="firstDocumentNumber" class="form-control">
        </div>
           <span class="col-sm-1 text-right" > / </span>
        <div class="col-sm-1">
          <input type="number" id="secondDocumentNumber" class="form-control">
        </div>
      </div>
    </form>

或使用add-on

<div class="input-group">
   <span class="input-group-addon" id="basic-addon1">/</span>
   <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

【讨论】：