Css 输入组插件：如何对齐宽度

在小型浏览器上，输入组将被包装，两个输入组插件的不同大小是显而易见的

有没有办法调整标签的宽度

提货单
需要交付摘要

您可以在css中使用

@media

@媒体和全部（最大宽度：481px）{
/*主要语法风格*/
.输入组，
.input group.input group插件，
.输入组.窗体控件{
显示：块；
宽度：100%；
}
/*样式右边框*/
.input group.input group插件：第一个子{
边框：1px实心#CCC；
边界半径：4px；
}
}

提货单
需要交付摘要

从技术上讲，您可以使元素的大小相同，但由于结构原因，您不能（使用CSS）使所有标签的宽度与最长标签的宽度相同。但是，您可以使用JavaScript

选择所有

。输入作为其父级的第一个子级的组加载项，然后循环查找最长的一个

找到最长宽度后，定义一个新的样式表元素，并在其中插入一个媒体查询，该查询检测断点发生的宽度（992px），并将与上一个选择器匹配的元素的最小宽度设置为最长元素的最小宽度加上两个像素（用于边框）

如果尝试使用
width
而不是
minwidth
，则会破坏布局的其余部分

使用此方法可避免捕获
window.onresize

如果要增加查询的特殊性，只需更改
选择器


var选择器='。输入组加载项：第一个子项'；
var labels=document.queryselectoral（选择器），最长=0；
for（Object.keys（标签）中的变量i）
最长=最长<标签[i]。客户端宽度？标签[i]。客户端宽度：最长；
var styleString='@media-screen和（最大宽度：992px）{'+selector+'{min-width:'+（+longest+2）+'px}}'；
var style=document.createElement（'style'）；
style.innerHTML=样式字符串；
document.body.appendChild（样式）；


var选择器='。输入组加载项：第一个子项'；
var labels=document.queryselectoral（选择器），最长=0；
for（Object.keys（标签）中的变量i）
最长=最长<标签[i]。客户端宽度？标签[i]。客户端宽度：最长；
var styleString='@media-screen和（最大宽度：992px）{'+selector+'{min-width:'+（+longest+2）+'px}}'；
var style=document.createElement（'style'）；
style.innerHTML=样式字符串；
document.body.appendChild（样式）

提货单
需要交付摘要
也可以用于“.input group.input group addon，.input-group.input-group-lg.form控件{width:50%；文本溢出：省略号；float:left；溢出：隐藏；空白：nowrap；显示：inline block；}。输入组{width:100%}“至少在我的平板电脑上，这与原作完全相同