获取表单输入以扩展到具有可变大小标签的容器的全宽

Question

SO 上有几篇文章涉及将内容扩展到容器。 None 其中似乎涵盖了当表单控件旁边有一个宽度可变的内联标签时，将表单控件的宽度扩展到其容器的用例。

我希望标签为任意大小，然后将文本字段扩展到剩余宽度。设置 width: 100% 使其撞到下一行。

这是代码示例：http://codepen.io/anon/pen/GWgraK

<form class="form-inline">
  <div class="row">
    <div class="form-group string optional bc_search_last_name">
      <label class="string optional control-label" for="bc_search_last_name">label</label>
      <input class="string optional form-control" type="text" name="bc_search[last_name]" id="bc_search_last_name">
     </div>
   </div>
  <div class="row">
    <div class="form-group string optional bc_search_first_name"> 
      <label class="string optional control-label" for="bc_search_first_name">Really long label</label>
      <input class="string optional form-control" type="text" name="bc_search[first_name]" id="bc_search_first_name">
    </div>
  </div>
</form>

和Sasscss

.form-inline
  width: 600px
  border: 1px dotted black
  position: relative
  left: 50px
  top: 50px
  padding-left: 20px
  padding-top: 5px

  .form-group
    margin-bottom: 10px
    width: 100%

  .control-label
    padding: 6px 9px 6px 6px
    border: 1px solid #ccc
    border-right: 0
    border-radius: 5px 0 0 5px
    background-color: rgba(179, 177, 177, 0.28)
    float: left

  .form-control
    width: auto
    float: left

Answer 1

您可以在父级上使用 display: flex; 并在输入上使用 flex-grow: 1; 以使输入增长以填充可用的 space。

.form-inline {
  width: 600px;
  border: 1px dotted black;
  position: relative;
  left: 50px;
  top: 50px;
  padding: 10px 10px 0;
}
.form-inline .form-group {
  margin-bottom: 10px;
  width: 100%;
}
.form-inline .control-label {
  padding: 6px 9px 6px 6px;
  border: 1px solid #ccc;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background-color: rgba(179, 177, 177, 0.28);
}

.form-inline .form-group {
  display: flex!important;
}
.form-group input {
  flex-grow: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div>
    <div class="form-group string optional bc_search_last_name"><label class="string optional control-label" for="bc_search_last_name">label</label><input class="string optional form-control" type="text" name="bc_search[last_name]" id="bc_search_last_name"></div>
  </div>
  <div>
    <div class="form-group string optional bc_search_first_name"><label class="string optional control-label" for="bc_search_first_name">Really long label</label><input class="string optional form-control" type="text" name="bc_search[first_name]" id="bc_search_first_name"></div>
  </div>
</form>

Answer 2

尝试使用 flexbox 而不是 float

  .form-group {display: flex}
  .form-control {flex: 1}

http://codepen.io/tuiaverde/pen/KWwWNX

获取表单输入以扩展到具有可变大小标签的容器的全宽

Get form input to expand to full width of container with variable size label

html

css

label

sass

width