Bootstrap 如何阻止引导数据列对齐到行的底部？

ivqmmu1c 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(163)

<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">
                    <button class="btn" type="submit" value="click" name="delete_element">X</button>
                </div>
            </div>

我在这里尝试创建的“delete_element”按钮似乎坚持要与底部对齐，无论我如何尝试设置它的样式，无论是使用内联CSS样式还是调用bootstrap align方法。我想让它与contenteditable元素对齐--我该怎么做呢？在列中使用按钮会不会有bug？

twitter-bootstrap

来源：https://stackoverflow.com/questions/74096197/how-to-stop-bootstrap-column-from-aligning-to-the-bottom-of-a-row

1条答案

按热度按时间

wn9m85ua1#

您不了解Bootstrap是如何工作的，这就是为什么无论如何您的按钮都与**row（！）**的底部对齐。

注意：我编辑了您的问题标题，因为它是错误的。*

错误：如何阻止引导按钮与列的底部对齐？
正确：如何阻止Bootstrap列与行的底部对齐？
由于col类的存在，无论添加什么CSS，按钮都将占据全屏宽度（即12列）。因此，不是按钮导致问题，而是列类导致问题。
如果希望两个元素并排，则：
1.两列合计不应超过12列，且
1.不应使用col类（可以使用col-1、col-2、col-3等类）。
在下面的例子中，你可以看到我使用了col-1类两次（1列+ 1列= 2列，少于12列）。我建议你阅读Bootstrap 5文档中关于grid system的内容。
请参阅下面的片段。

<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>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何阻止引导数据列对齐到行的底部？

1条答案

相关问题

热门标签

最新问答