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

查看：30
本文介绍了Bootstrap4 使所有输入组插件宽度相同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

相关的 Html 是

<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">电子邮件

<input type="text" name="licenseEmail" value="paultaylor@jthink.net" class="form-control" aria-writtenby="licenseEmaillabel">

<div class="input-group mb-2"><div class="input-group-prepend"><label class="input-group-text" id="licenseKey1label">许可证密钥 1

<input type="text" name="licenseKey1" value="51302c021440d595c860233f136731865a12cfad2ce2cc2" class="form-control" aria-描述by="licenseKey1label">

<div class="input-group mb-2"><div class="input-group-prepend"><label class="input-group-text" id="licenseKey2label">许可证密钥 2

<input type="text" name="licenseKey2" value="1e50214376557ba3e1dede6c490f33d07b738515c8c2a03" class="form-control" aria-描述by="licenseKey2label">

<h3 class="error" style="visibility:hidden;">&nbsp;<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">获得许可证</表单></main>

解决方案

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

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

这是我的纯 CSS 解决方法:

.input-group-prepend {宽度:35%；/*根据需要调整*/}.input-group-prepend 标签 {宽度:100%；溢出:隐藏；}

<小时>

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

例如:

/* 增长到父级的 50%*/<label class="input-group-text w-100" id="licenseEmaillabel">/* 增长到父级的 100% */

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

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.

Relevant Html is

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

解决方案

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.

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.

Here is my pure CSS workaround:

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

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

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

For example:

<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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆