Css Bootstrap4使所有输入组加载项宽度相同
是否可以使所有前置加载项的宽度相同 i、 e在这个屏幕截图中,我希望电子邮件、许可证密钥1和许可证密钥2的长度相同,这是可能的 如果我没有使用附加组件,而只是使用常规标签和表单网格,这是可能的,但似乎前置附加组件看起来比常规标签好得多 相关的Html是Css Bootstrap4使所有输入组加载项宽度相同,css,twitter-bootstrap,bootstrap-4,Css,Twitter Bootstrap,Bootstrap 4,是否可以使所有前置加载项的宽度相同 i、 e在这个屏幕截图中,我希望电子邮件、许可证密钥1和许可证密钥2的长度相同,这是可能的 如果我没有使用附加组件,而只是使用常规标签和表单网格,这是可能的,但似乎前置附加组件看起来比常规标签好得多 相关的Html是 <main class="container-fluid"> <form action="/license.process" name="process" id="process" method="post">
<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;">
</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>
电子邮件
许可证密钥1
许可证密钥2
拿到执照
所以这实际上相当复杂,因为每个标签都在它自己的div中,而不是兄弟链的一部分。另外,Bootstrap不支持这种类型的大小调整,只支持相对大小调整表单类(这实际上只会使字体变大)。这样就消除了我所能想到的使用flex/child属性的大多数可能性。然而,我认为在这种情况下,硬编码并不是正确的词语用法。但想法是一样的
在这种情况下,使用minwidth
的示例是不正确的,因为minwidth
!=<代码>宽度=xx。例如,如果将min width
设置为50px,但有一个文本字符串比该值长,则仍然存在与上述相同的问题。本质上,如果您不想将它们all设置为一个特定值,那么您唯一的其他选择就是使用Javascript
以下是我的纯CSS解决方案:
.input-group-prepend {
width : 35%; /*adjust as needed*/
}
.input-group-prepend label {
width: 100%;
overflow: hidden;
}
此外,您可以使用Bootstrap特定的类,但这是任意的,也是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 */
/*增长到父级的50%*/
/*增长到父级的100%*/
使用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组文本宽度,并返回最大的文本宽度。下一行将此宽度应用于所有.输入组文本div
资料来源:
仅使用引导类:
<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>
姓名:
地址1:
看起来像这样:
标签textx
这会有用的!相应地调整
的列网格。输入组前置
将w-50
类添加到输入组前置
和
将w-100
类添加到输入组文本中
像这样
<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>
标签
它们是水平对齐的。你的意思是标签的宽度相同吗?如果你只有3个字段,并且你知道文本永远不会改变,只需对的值进行硬编码。将组文本{min width:150px;}
输入到最长的文本块?@soulshined yes我是标签的宽度,硬编码宽度不好IDEA导致根据语言变化谢谢,使用百分比的问题在于,只有当浏览器窗口大小合适时,宽度才正确,使窗口变小,宽度变得太小,即使有足够的空间容纳标签和值。如果我设置为正确的值,Min Width将适用于英语(70%的用户基数),并且对于需要更长长度的语言不会太差,因为它仍然可以确保所有文本都是可见的,只是没有对齐。事实上,页面是动态创建的,因此我可以设置特定于语言的宽度,但是为了获得奖励,我做了很多工作。但我不想创建一个新的突破性设计,只是为了使用Bootstrap来创建我的Web应用程序的更完善的版本。那么,我使用这样的插件是不是就错了,我是否应该使用一个常规的表单标签(即输入上方的文本,它实际上没有附加到输入字段)?实际上,想要覆盖引导默认值是很常见的,并且是合理的。然而,它们让这样做很烦人。如果您不想要百分比,可以混合使用这两种方法,例如,默认宽度为25%,最小宽度为150px,最大宽度为250px。当然也可以使用javascript,但接下来您将不得不担心使用javascript解决方案调整窗口的大小。如果您不想要特定于引导的类,那么您的问题仍然非常相似,因为标签不属于同一层次结构。有人可能有比我更好的解决方案,但听起来你需要javascriptSure,但是我想知道的是,您认为我应该使用输入组前置作为这样的标签,还是不使用输入组前置,而是使用Bootstrap4文档的Forms components部分中的示例?正如您所说,与普通标签相比,您喜欢它的外观。这是一个主观的观点,最终是你的项目,你应该做你喜欢做的事情。但如果问题是,我是否使用了错误的类?那就不,你的孩子不是。Bootstrap4不会阻止这种行为,并以与您相同的方式使用它。所以这样做不是禁忌,也不是“坏习惯”。完全可以接受,只是不容易定制,因为他们不是同一父母的孩子@PaulTaylorI beleave。它回答了这个问题。作为另一种方法,我会使用一个HTML表s.t。浏览器不需要任何代码就可以为您完成这项工作。
<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>