gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 11:08:56 25 4
gpt4 key购买 nike

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

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

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

enter image description here

相关的 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>

最佳答案

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

在这种情况下使用 min-width 的示例是不正确的,因为 min-width !== width=xx。比如你把min-width设置为50px,但是一串文字比那个长,你还是和上面一样的问题。本质上,如果您不想将它们全部 设置为一个特定值,那么您唯一的其他选择是使用 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 */

关于css - Bootstrap4 使所有输入组插件宽度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50477193/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com