防止Bootstrap列与行底部对齐的方法

Question

<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中使用按钮时是否存在错误？

Answer 1

你不理解Bootstrap的工作原理，这就是为什么你的按钮无论如何都与row (!)底部对齐。

注意：我修改了你的问题标题，因为它是错误的。

由于使用了col类，你的按钮将始终占据整个屏幕宽度（即12列），无论你添加了什么CSS。因此，问题不是按钮引起的，而是列类引起的。

如果你想让两个元素并排显示，那么：

1. 两个列加在一起不应超过12列
2. 不要使用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>