如何在Bootstrap中正确定位按钮？代码问题及方案合理性咨询

你的代码核心问题是违反了Bootstrap栅格系统的嵌套规则，导致布局错位：

• Bootstrap要求.row必须是.container/.container-fluid或者.col的直接子元素，你直接在.row里嵌套了另一个.row（表情按钮的那一行），这会触发默认的负margin，打乱布局。
• 提交按钮的.row直接嵌套在textarea所在的.row内部，没有被.col包裹，导致它的布局不受栅格控制，只能靠硬加margin调整。

修正后的代码 #

<div class="container">
    <div class="row text-center">
        <div class="col mt-3">
            <h1 class="hellotext text-light">Hey, <span class="usertext">how was your day?</span></h1>
        </div>
    </div>
    <!-- 表情按钮行：单独作为一个row，放在container下 -->
    <div class="row d-flex justify-content-center mt-4">
        <button type="button" class="btn btn-circle btn-cry btn-xl">😢</button>
        <button type="button" class="btn btn-circle btn-bad btn-xl">😔</button>
        <button type="button" class="btn btn-circle btn-normal btn-xl">😐</button>
        <button type="button" class="btn btn-circle btn-good btn-xl">🙂</button>
        <button type="button" class="btn btn-circle btn-verygood btn-xl">🥳</button>
    </div>
    <!-- textarea行 -->
    <div class="row mt-2">
        <div class="col d-flex justify-content-center">
            <textarea class="form-control w-50" cols="10" rows="7"></textarea>
        </div>
    </div>
    <!-- 提交按钮行：独立成row，和上面的row同级 -->
    <div class="row mt-3">
        <div class="col d-flex justify-content-center">
            <div class="btn submitbtn">Submit</div>
        </div>
    </div>
</div>

关键调整点 #

1. 把原来嵌套在row里的表情按钮row、提交按钮row都独立出来，作为container的直接子row，遵循container → row → col的正确层级。
2. 用Bootstrap自带的间距类（比如mt-3）控制元素间的垂直距离，替代自定义margin，保证响应式适配。
3. 移除了多余的重复text-center类（父row已经设置，子col无需重复）。

这样调整后，提交按钮会自动居中对齐到textarea下方的正确位置，不需要硬加margin，同时保持布局的响应式特性。

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