Question

是否可以使所有prepend加载项的宽度相同？

即在此屏幕截图中我想要电子邮件，许可证密钥1＆amp;许可证密钥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>

Answer 1

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

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

这是我的纯CSS解决方法：

min-width

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

例如：

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

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

Answer 2

使用jquery，您可以执行以下操作：

var biggest = Math.max.apply(Math, $('.input-group-text').map(function(){ return $(this).width(); }).get());
$('.input-group-text').width(biggest);

Math.max.apply读取所有.input-group-text宽度并返回最大的宽度。下一行将此宽度应用于所有.input-group-text div。

来源： jquery-get-max-width-of-child-divs

Answer 3

只需使用bootstrap类：

<div class="input-group">
    <div class="input-group-prepend col-3">
        <span class="input-group-text col-12">Name:</span>
    </div>
    <input type="text" class="form-control" placeholder="Name">
</div>
<div class="input-group">
    <div class="input-group-prepend col-3">
        <span class="input-group-text col-12">Address 1:</span>
    </div>
    <input type="text" class="form-control" placeholder="Street Address">
</div>

看起来像这样：

Answer 4

<div class="form-row">
   <div class="col-md input-group mb-3">
      <div class="input-group-prepend col-5 col-sm-4 col-md-3 col-lg-3 col-xl-2 px-0">
         <span class="input-group-text w-100">Label textx</span>
      </div>
      <input class="form-control" type="text">
   </div>
</div>

这将起作用！相应地调整.input-group-prepend的col网格！

Answer 5

将w-50类添加到input-group-prepend并将w-100类添加到input-group-text

像这样

<div class="input-group">
   <div class="input-group-prepend w-50">
     <span class="input-group-text w-100">label</span>
   </div>
   <input type="text" class="form-control " />
</div>

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

5 个答案: