input-group-addon：如何对齐宽度

Question

在小型浏览器上，输入组将换行，两个输入组插件的不同大小非常明显。

是否可以对齐标签的宽度？

＆＃13;

＆＃13;

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-12">
  <div class="row">
    <div class="col-md-6" style="padding:1%;">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">Pickup Docket</span>
        <input id="pickDoc" type="text" class="form-control">
      </div>
    </div>
    <div class="col-md-6" style="padding:1%;">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">Delivery docket required </span>
        <input type="button" class="form-control" />
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

选择他们父母的第一个孩子的所有.input-group-addon，然后循环浏览它们以找到最长的孩子。

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

如果您尝试使用width代替min-width，则会破坏布局的其余部分。

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

的开销和逻辑

如果您想提高查询的特异性，只需更改selector即可。

Demo

var selector = '.input-group-addon:first-child';
var labels = document.querySelectorAll(selector), longest = 0;

for(var i in Object.keys(labels))
    longest = longest < labels[i].clientWidth ? labels[i].clientWidth : longest;

var styleString = '@media screen and (max-width: 992px) { ' + selector + ' { min-width: ' + (+longest + 2) + 'px } }';

var style = document.createElement('style');
style.innerHTML = styleString;

document.body.appendChild(style);

＆＃13;

＆＃13;

var selector = '.input-group-addon:first-child';
var labels = document.querySelectorAll(selector), longest = 0;

for(var i in Object.keys(labels))
    longest = longest < labels[i].clientWidth ? labels[i].clientWidth : longest;

var styleString = '@media screen and (max-width: 992px) { ' + selector + ' { min-width: ' + (+longest + 2) + 'px } }';

var style = document.createElement('style');
style.innerHTML = styleString;

document.body.appendChild(style);

＆＃13;

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-12">
  <div class="row">
    <div class="col-md-6" style="padding:1%;">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">Pickup Docket</span>
        <input id="pickDoc" type="text" class="form-control">
      </div>
    </div>
    <div class="col-md-6" style="padding:1%;">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">Delivery docket required </span>
        <input type="button" class="form-control" />
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果你想为多个不同的部分运行它，为每个表单添加一个公共类和一个唯一的id，选择所有部分，然后为每个部分运行该函数。

只在文档加载时运行一次，只要标签内容不变，就不必再次运行。

var formSelector = '.myForm';
var forms = document.querySelectorAll(formSelector) 

for(var form in Object.keys(forms)) {
    var selector = formSelector + '#' + forms[form].id + ' .input-group-addon:first-child';
    var labels = document.querySelectorAll(selector), longest = 0;

    for(var i in Object.keys(labels))
        longest = longest < labels[i].clientWidth ? labels[i].clientWidth : longest;

    var styleString = '@media screen and (max-width: 992px) { ' + selector + ' { min-width: ' + (+longest + 2) + 'px } }';

    var style = document.createElement('style');
    style.innerHTML = styleString;

    document.body.appendChild(style);
}

＆＃13;

＆＃13;

var formSelector = '.myForm';
var forms = document.querySelectorAll(formSelector) 

for(var form in Object.keys(forms)) {
    var selector = formSelector + '#' + forms[form].id + ' .input-group-addon:first-child';
    var labels = document.querySelectorAll(selector), longest = 0;

    for(var i in Object.keys(labels))
        longest = longest < labels[i].clientWidth ? labels[i].clientWidth : longest;

    var styleString = '@media screen and (max-width: 992px) { ' + selector + ' { min-width: ' + (+longest + 2) + 'px } }';

    var style = document.createElement('style');
    style.innerHTML = styleString;

    document.body.appendChild(style);
}

＆＃13;

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<form class="myForm" id="myForm1">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-6" style="padding:1%;">
        <div class="input-group input-group-lg">
          <span class="input-group-addon">Pickup Docket</span>
          <input id="pickDoc" type="text" class="form-control">
        </div>
      </div>
      <div class="col-md-6" style="padding:1%;">
        <div class="input-group input-group-lg">
          <span class="input-group-addon">Delivery docket required </span>
          <input type="button" class="form-control" />
        </div>
      </div>
    </div>
  </div>
</form>
<form class="myForm" id="myForm2">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-6" style="padding:1%;">
        <div class="input-group input-group-lg">
          <span class="input-group-addon">Pickup Docket</span>
          <input id="pickDoc" type="text" class="form-control">
        </div>
      </div>
      <div class="col-md-6" style="padding:1%;">
        <div class="input-group input-group-lg">
          <span class="input-group-addon">Something else </span>
          <input type="button" class="form-control" />
        </div>
      </div>
    </div>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在css中使用@media

@media all and (max-width: 481px) {
  /* main finctionality style */
  .input-group, 
   .input-group .input-group-addon,
  .input-group .form-control {
    display: block;
    width: 100%;
  }
  
    /* style right border */
    .input-group .input-group-addon:first-child {
        border: 1px solid #CCC;
        border-radius: 4px;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
  <div class="row">
    <div class="col-md-6" style="padding:1%;">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">Pickup Docket</span>
        <input id="pickDoc" type="text" class="form-control">
      </div>
    </div>
    <div class="col-md-6" style="padding:1%;">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">Delivery docket required </span>
        <input type="button" class="form-control" />
      </div>
    </div>
  </div>
</div>