如何在 Bootstrap 4 中将卡片设置到 col-md 的中间[重复]

Question

我想把这张卡放在中间而不是中心，该怎么做？ 我已经尝试使用 my-auto 但根本不起作用。

请检查我的代码并进行一些更改。谢谢！

我的脚本：

    <div class="container">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="card text-white" style="background: #DA4453;  /* fallback for old browsers */
                background: -webkit-linear-gradient(to right, #89216B, #DA4453);  /* Chrome 10-25, Safari 5.1-6 */
                background: linear-gradient(to right, #89216B, #DA4453); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
                ">
                    <div class="card-header">
                        <h4>Update Antibot API Key</h4>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('updateApiKey') }}" method="POST">
                            @csrf
                            <input value="{{ $blocker ? $blocker->antibot_api : '' }}" class="form-control" type="text" name="antibot_api" placeholder="Insert your api key">
                            <button class="btn btn-outline-light mt-3 float-right" type="submit">Update</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-3"></div>
        </div>
      </div>

我想要什么

Answer 1

my-auto 可能正在工作，但它的容器似乎没有设置高度属性。尝试将包含卡片的 div 设置为全高。你可以用h-100