文本输入响应宽度 - Bootstrap 3

Question

环境：

我有一个input type="text"，一个label和一个自定义checkbox，label位于span内，用div封装它们，在{{1}内在li。

上

样式：

• input type="text"仅具有美学风格。
• label有margin-left:5px;
• span有display: inline-block; float: right;
• div来自Bootstrap 3.3的课程form-group和form-inline

问题：

label最初为空，但是当我在input中输入内容后，会运行一个脚本，并在文本中填入相同的label。

我一直在尝试将width的{​​{1}}设置为input，其宽度与其所在的容器相同，达到auto，这样当span出现时，它会自动缩短。

相反，label仍然很小。我想我做错了，但即使进行了一些研究，我也无法理解它到底是什么。

我已经尝试从input中移除这些类（只是打破它），应用div，使它变大，但是将它推到width=100%;行下方。

有人可以提供一些帮助吗？

以下是它的显示方式：

没有文字

已添加label

的文字

链接到Codepen。

Answer 1

你需要在输入和标签周围使用calc来设置宽度100％ - （任意数量以允许复选框），例如。

.listWrapper {
  width: calc(100% - 75px);
} 

然后你可以设置这个.listWrapper来显示：flex，并给输入flex：1 1 auto，这样输入就会根据需要增长/缩小，占用所有可用的内部空间减去标签所需的空间。您可以将flex-wrap设置为nowrap，使其全部保留在一行上。

这是一个更新的codepen：

https://codepen.io/anon/pen/ZXwxKz

相关的更新样式在这里，所以你不必挑选所有内容：

.listWrapper {
  width: calc(100% - 75px);
  float:left;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.listWrapper .listInput {
  flex: 1 1 auto;
}

由于浮点数，您可能还需要在包装器上使用clearfix。如果您已经有了clearfix样式，请将其应用于＆＃34; .form-group.form-inline＆＃34;如果没有，请将此样式添加到CSS中：

.form-group.form-inline:after {
    content: "";
    display: table;
    clear: both;
}