如何在bootstrap上正确定位

Question

我想将按钮正确放置在我用红色绘制的位置，但我有点困惑。

<div class="container">
        <div class="row text-center">
            <div class="col mt-3 text-center">
                <h1 class="hellotext text-light">Hey, <span class="usertext">how was your day?</span></h1>
            </div>
            <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>
            <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 class="row">
                    <div class="col d-flex justify-content-center">
                        <div class="btn submitbtn">Submit</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

我尝试更改 col、row 和 css，但我无法做到我想要的。如果我给submitbtn留200px的边距，我可以解决问题，但是这是正确的方法吗？如果您能告诉我我在代码中犯的错误，我也将不胜感激。

Answer 1

您可以将该宽度赋予外行，以使所有元素的宽度为 50%，而不是为文本区域指定 50% 的宽度。这样你就可以替换围绕按钮的 div 中的

justify-content-center

类。 请参阅下面的代码：

<div class="container d-flex justify-content-center">
    <div class="row text-center w-50">
        <div class="col mt-3 text-center">
            <h1 class="hellotext text-light">Hey, <span class="usertext">how was your day?</span></h1>
        </div>
        <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>
        <div class="row mt-2">
            <div class="col d-flex justify-content-center">
                <textarea class="form-control" cols="10" rows="7"></textarea>
            </div>
            <div class="row">
                <div class="col d-flex justify-content-start">
                    <div class="btn submitbtn">Submit</div>
                </div>
            </div>
        </div>
    </div>
</div>