时间戳

首页 > 解决方案 > Bootstrap4 使所有输入组插件的宽度相同

css - Bootstrap4 使所有输入组插件的宽度相同

问题描述

是否可以使所有前置附加组件的宽度相同？

即在此屏幕截图中，我希望电子邮件、许可证密钥 1 和许可证密钥 2 的长度相同，这可能吗？

如果我不使用附加组件而只使用常规标签和表单网格，那将是可能的，但似乎前置插件看起来比常规标签好得多。

在此处输入图像描述

相关的HTML是

<main class="container-fluid">
  <form action="/license.process" name="process" id="process" method="post">
      <div class="input-group mb-2">
          <div class="input-group-prepend">
              <label class="input-group-text" id="licenseEmaillabel">
                  Email
              </label>
          </div>
          <input type="text" name="licenseEmail" value="paultaylor@jthink.net" class="form-control" aria-describedby="licenseEmaillabel">
      </div>
      <div class="input-group mb-2">
          <div class="input-group-prepend">
              <label class="input-group-text" id="licenseKey1label">
                  License Key 1
              </label>
          </div>
          <input type="text" name="licenseKey1" value="51302c021440d595c860233f136731865a12cfad2ce2cc2" class="form-control" aria-describedby="licenseKey1label">
      </div>
      <div class="input-group mb-2">
          <div class="input-group-prepend">
              <label class="input-group-text" id="licenseKey2label">
                  License Key 2
              </label>
          </div>
          <input type="text" name="licenseKey2" value="1e50214376557ba3e1dede6c490f33d07b738515c8c2a03" class="form-control" aria-describedby="licenseKey2label">
      </div>
      <h3 class="error" style="visibility:hidden;">
          &nbsp;
      </h3>
      <input type="submit" name="cancel" value="Cancel" class="btn btn-outline-secondary">
      <input type="submit" name="save" value="Save" class="btn btn-outline-secondary">
      <button onclick="j2html.tags.UnescapedText@d352d4f" type="button" class="btn btn-outline-secondary">
          Get License
      </button>
  </form>
</main>

标签： csstwitter-bootstrapbootstrap-4

解决方案

所以这实际上非常复杂，因为每个标签都在它自己的 div 中，而不是兄弟链的一部分。而且 afaik，Bootstrap 不支持这种类型的大小，只支持相对大小的表单类（这实际上只会使字体更大）。这消除了我能想到的使用 flex/child 属性的大多数可能性。但是，我认为在这种情况下，硬编码不是正确的词用法。但想法是一样的。

在这种情况下使用示例min-width不正确，因为min-width!== width=xx。例如，如果您设置min-width为 50px，但有 1 个文本字符串比此长，您仍然会遇到与上述相同的问题。本质上，如果您不想将它们全部设置为一个特定值，那么您唯一的其他选择就是使用 Javascript。

这是我的纯 CSS 解决方法：

.input-group-prepend {
  width : 35%; /*adjust as needed*/
}

.input-group-prepend label {
  width: 100%;
  overflow: hidden;
}

此外，您可以使用 Boostrap 特定的内联样式类，但这是任意的，也是 Bootstrap 的问题之一（太多的内联类使代码混乱，然后您必须手动将其添加到每个元素）。只是提供它作为替代品

例如：

<div class="input-group-prepend w-50"> /* grows to 50% of parent*/
  <label class="input-group-text w-100" id="licenseEmaillabel"> /* grows to 100% of parent */

推荐阅读