Bootstrap 4.0.0中col-md-6列内输入框无法占满宽度求助

嘿，我来帮你搞定这个Bootstrap输入框宽度的问题！你遇到的这个情况，大概率是因为那个带d-flex类的.socialMedia容器影响了输入框的宽度表现——Bootstrap的form-control默认是width: 100%，但在flex容器里，子元素的宽度行为会受flex布局规则约束，输入框所在的span作为flex子项，默认不会自动填满容器的剩余空间。

这里有两个简单的解决方案，你可以根据需求选一个：

方案1：给输入框的父span添加flex扩展类 #

直接给包含输入框的<span>加上flex-grow-1类，这个类会让它自动填充flex容器里的剩余空间，输入框的width:100%就能正常生效，从而占满整个col-md-6的宽度。修改后的代码如下：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span class="flex-grow-1"><input type="text" class="form-control"></span>
    </div>
  </div>
</div>

方案2：直接给输入框添加flex扩展类 #

如果你不想修改父级span，也可以直接给输入框加上flex-grow-1类，同样能让它在flex容器里占满剩余空间：

<input type="text" class="form-control flex-grow-1">

原理小科普 #

Bootstrap的d-flex会把容器内的子元素变成flex项目，默认的flex-grow: 0意味着这些项目不会主动扩展去填充剩余空间，而flex-grow-1类就是把这个属性设为1，让目标元素能占据容器里所有未被其他元素占用的空间，配合form-control自带的width:100%，自然就撑满整个列的宽度啦。

内容的提问来源于stack exchange，提问作者Momin