<div class="row">
<div class="col-lg-10">
<div class="expandable-input-small" id="input_element" contenteditable="true" data-max-length="100">测试</div>
</div>
<div class="col">
<button class="btn" type="submit" value="click" name="delete_element">X</button>
</div>
</div>
这里我试图创建的“delete_element”按钮似乎无论我如何尝试进行样式设置，无论是使用内联CSS样式还是调用bootstrap的对齐方法，它都坚持底部对齐。我希望它与contenteditable元素对齐 - 我该如何做到这一点？在col中使用按钮时是否存在错误？
你不理解Bootstrap的工作原理，这就是为什么你的按钮无论如何都与
row(!)底部对齐。注意：我修改了你的问题标题，因为它是错误的。
由于使用了
col类，你的按钮将始终占据整个屏幕宽度（即12列），无论你添加了什么CSS。因此，问题不是按钮引起的，而是列类引起的。如果你想让两个元素并排显示，那么：
col类（你可以使用col-1、col-2、col-3等类）。在下面的示例中，你可以看到我使用了两次
col-1类（1列 + 1列 = 2列，小于12列）。我建议你阅读Bootstrap 5关于网格系统的文档。请查看下面的代码片段。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div class="row d-flex align-items-center"> <div class="col-1"> <div class="expandable-input-small" id="input_element" contenteditable="true" data-max-length="100">Test </div> </div> <div class="col-1"> <button class="btn" type="submit" value="click" name="delete_element">X</button> </div> </div>