Bootstrap输入组

Question

我正在使用Bootstrap和Simple Form。我有一个奇怪的球形元素，我正在尝试构建。这是让我95％的代码：

    <%= f.input :lsd_from, label: 'LSD From', wrapper: :horizontal_input_group do %>
      <%= f.text_field :lsd_from, placeholder: 'LSD', class: 'form-control' %>
      <span class="input-group-addon">-</span>
      <%= f.text_field :sec_from, placeholder: 'SEC', class: 'form-control' %>
      <span class="input-group-addon">-</span>
      <%= f.text_field :twp_from, placeholder: 'TWP', class: 'form-control' %>
      <span class="input-group-addon">-</span>
      <%= f.text_field :rge_from, placeholder: 'RGE', class: 'form-control' %>
      <span class="input-group-addon">W</span>
      <%= f.text_field :m_from, class: 'form-control' %>
      <span class="input-group-addon">M</span>
    <% end %>

呈现给：

<div class="form-group integer optional pipeline_segment_lsd_from">
  <label class="integer optional col-sm-2 control-label" for="pipeline_segment_lsd_from">LSD From</label>
  <div class="col-sm-6">
    <div class="input-group col-sm-12">
      <input placeholder="LSD" class="form-control" type="text" name="pipeline_segment[lsd_from]" id="pipeline_segment_lsd_from" style="width: 50px;">
      <span class="input-group-addon">-</span>
      <input placeholder="SEC" class="form-control" type="text" name="pipeline_segment[sec_from]" id="pipeline_segment_sec_from" style="width: 50px;">
      <span class="input-group-addon">-</span>
      <input placeholder="TWP" class="form-control" type="text" name="pipeline_segment[twp_from]" id="pipeline_segment_twp_from" style="width: 50px;">
      <span class="input-group-addon">-</span>
      <input placeholder="RGE" class="form-control" type="text" name="pipeline_segment[rge_from]" id="pipeline_segment_rge_from" style="width:  50px;">
      <span class="input-group-addon">W</span>
      <input class="form-control" type="text" name="pipeline_segment[m_from]" id="pipeline_segment_m_from" style="width:  20px;">
      <span class="input-group-addon">M</span>
    </div>
  </div>
</div>

看起来像这样：

我正在寻找：

问题是

• input-group-addon和相邻输入之间的微小间距
• 如何为各个字段设置特定宽度？

如果我尝试修改字段的宽度，包装器跨度要拉伸以填充父级，我最终得到元素之间的各种填充/边距，如下所示：

旁注：

1. 我应该让input-group-addon变成浅灰色等。
2. 我还应该使占位符文字更轻盈
3. 此数据条目为用户所知，因此缺少传统的字段标签不应成为问题

Answer 1

您可以尝试此解决方案。我希望这对你的情况有用。

请查看 CODEPEN

上的示例

而不是将宽度设置为输入。您可以在输入组周围包裹 div ，并将max-width设置为 div ，这样即使您拉伸，也可以固定输入的宽度视口区域。

同时考虑到你的观点我也做了一些改变。请查看示例链接。

HTML：

<div class="section-input">
      <div class="input-group">
        <input placeholder="LSD" class="form-control" type="text" name="pipeline_segment[lsd_from]" id="pipeline_segment_lsd_from">
        <span class="input-group-addon">-</span>
        <input placeholder="SEC" class="form-control" type="text" name="pipeline_segment[sec_from]" id="pipeline_segment_sec_from">
        <span class="input-group-addon">-</span>
        <input placeholder="TWP" class="form-control" type="text" name="pipeline_segment[twp_from]" id="pipeline_segment_twp_from">
        <span class="input-group-addon">-</span>
        <input placeholder="RGE" class="form-control" type="text" name="pipeline_segment[rge_from]" id="pipeline_segment_rge_from">
        <span class="input-group-addon">W</span>
        <input class="form-control" type="text" name="pipeline_segment[m_from]" id="pipeline_segment_m_from">
        <span class="input-group-addon">M</span>
      </div>
    </div>

CSS：

.section-input {
  max-width: 454px;
  margin: auto;
}

.section-input .input-group .form-control {
  border-radius: 0;
  border: 1px solid #555;
}

.section-input .input-group .input-group-addon {
  border-radius: 0;
  border: 1px solid #555;
  border-left: 0;
  border-right: 0;
  background-color: #efefef;
}

.section-input .input-group .input-group-addon:first-child {
  border-left: 1px solid #555;
}

.section-input .input-group .input-group-addon:last-child {
  border-right: 1px solid #555;
}

享受：）