如何解决Bootstrap行内按钮列与contenteditable元素底部对齐问题？

这不是Bootstrap中在col里使用按钮的Bug，只是默认布局的垂直对齐规则导致的。以下两种简单方法可以快速解决：

方法一：给行添加垂直居中类 #

Bootstrap的row本身是flex容器，默认align-items为stretch，会让列被拉伸，内部元素自然靠底。给row加上align-items-center类，就能让所有列内的元素垂直居中对齐：

<div class="row align-items-center">
    <div class="col-lg-10">
        <div class="expandable-input-small" id="input_element" contenteditable="true" data-max-length="100">Test </div>
    </div>
    <div class="col">
        <button class="btn" type="submit" value="click" name="delete_element">X</button>
    </div>
</div>

方法二：给按钮所在列添加内部对齐类 #

如果不想修改整行的对齐方式，也可以给按钮所在的col添加d-flex align-items-center，让该列内部的元素垂直居中：

<div class="row">
    <div class="col-lg-10">
        <div class="expandable-input-small" id="input_element" contenteditable="true" data-max-length="100">Test </div>
    </div>
    <div class="col d-flex align-items-center">
        <button class="btn" type="submit" value="click" name="delete_element">X</button>
    </div>
</div>

两种方法都能让按钮和左侧的contenteditable元素对齐，根据你的布局需求选择即可。

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