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

【问题标题】：Bootstrap4 make all input-group-addons same widthBootstrap4 使所有输入组插件的宽度相同
【发布时间】：2020-10-06 00:14:18
【问题描述】：

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

即在此屏幕截图中，我希望电子邮件、许可证密钥 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>

【问题讨论】：

它们水平对齐。您的意思是标签的宽度是相同的宽度吗？
如果您只有 3 个字段并且您知道文本永远不会更改，只需将 .input-group-text {min-width: 150px; } 的值硬编码为最长的文本？
@soulshined 是的意思是标签的宽度，硬编码宽度不是好主意，因为根据语言而变化

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

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

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

这是我的纯 CSS 解决方法：

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

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

此外，您可以使用 Boostrap 特定的 inline styling 类，但这是任意的，也是 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 */

【讨论】：

谢谢，使用百分比的问题是只有在浏览器窗口大小合适时宽度才正确，即使有足够的空间可以容纳标签，也要使窗口变小并且宽度变得太小和价值。如果我设置为正确的值，Min-Width 将适用于英语（70% 的用户群），并且对于需要较长长度的语言来说看起来不会太糟糕，因为它仍然可以确保所有文本都是可见的，只是没有排列。事实上，页面是动态创建的，所以我可以设置语言特定的宽度，但是为了奖励需要做很多工作。
但我并没有试图创建一个新的突破性设计，只是为了使用 Bootstrap 来创建我的 web 应用程序的更完善的版本。那么我使用这样的插件是不是完全错误，我应该只使用常规表单标签（即输入上方的文本实际上并未附加到输入字段）吗？
想要覆盖引导程序默认值实际上很常见，并且 IMO 是合理的。然而，他们做起来很烦人。如果您不想要百分比，您可以混合使用两者，例如默认宽度为 25%、最小宽度为 150 像素和最大宽度为 250 像素。当然也可以使用 javascript，但是您将不得不担心使用 javascript 解决方案调整窗口大小。如果您不想要引导特定类，那么您的问题仍然会非常相似，因为标签不属于同一层次结构。有人可能有比我更好的解决方案，但听起来你需要 javascript
当然，但我希望知道您是否认为我应该使用 input-group-prepend 作为这样的标签，或者我应该不使用 input-group-prepend 而只使用示例Bootstrap4 文档的 Forms components 部分？
正如您所说，与普通标签相比，您喜欢它的外观。这是一个主观意见，最终它是你的项目，你应该做你喜欢的事情。但如果问题是，我是否使用错误的类？那么不，你不是。 Bootstrap4 不会阻止这种行为，并以与您相同的方式使用它。因此，这样做不是禁忌，也不是“坏习惯”。完全可以接受，只是不容易定制，因为它们不是同一个父母的孩子@PaulTaylor

【解决方案2】：

只使用引导类：

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

看起来像这样：

【讨论】：

【解决方案3】：

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

【讨论】：

我相信它回答了这个问题。作为另一种方法，我将使用 HTML 表格，s.t.浏览器无需任何代码即可为您完成工作。

【解决方案4】：

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

【讨论】：

【解决方案5】：

<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 网格！

【讨论】：