Bootstrap4使所有输入组附加组件具有相同的宽度 [英] Bootstrap4 make all input-group-addons same width

问题描述

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

Is it possible to make all prepend add-ons same width?

即在此屏幕截图中，我想要电子邮件，许可证密钥1和&许可密钥2的长度可以相同.

i.e in this screenshot I would like Email, License Key 1 & License Key 2 to be the same length, is that possible.

如果我不使用附加组件，而只是使用常规标签和表单网格，则可以实现，但似乎前置附件看起来比常规标签好得多.

If I did not use add-ons and just used regular labels and a form grid it would be possible but it seems to be the prepend addons look much nicer then regular labels.

相关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="[e-mail]" 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>

推荐答案

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

So this is actually pretty complicated, because each label is in it's own div and not part of a sibling chain. And afaik, Bootstrap does not support this type of sizing, only relative sizing form classes (which essentially only makes the font bigger). That kind of eliminates most possibilities that I can think of using flex/child properties. However, I think hard-coding is not the right word usage in this circumstance. But the idea is the same.

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

The example of using min-width is not right in this circumstance because min-width !== width=xx. For example, if you set min-width to 50px, but 1 string of text is longer than that, you still have the same problem as above. Essentially, if you don't want to set them all to one specific value, then your only other option is to use Javascript.

这是我的纯CSS解决方法:

Here is my pure CSS workaround:

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

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

---

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

---

Additionally you could use Boostrap specific inline styling classes, but that's arbitrary and one of the issues with Bootstrap (too many inline classes clutter code, and then you would have to manually add it to each element). Just offering it as an alternative

例如:

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

这篇关于Bootstrap4使所有输入组附加组件具有相同的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！