如何将按钮向右对齐并使标题居中？

Question

我使用了下面的代码，输出的界面如下图所示。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-lg-12">

    <div class="card m-b-30">

        <div class="card-header container-fluid">

            <div class="row">

                <h2 class="card-title">Customer Profile Types</h2>

                <div class="col-md-4 float-right">

                    <button class="btn btn-primary">Add</button>

                    <button class="btn btn-primary" style="margin-left: 1em">Update</button>

                    <button class="btn btn-primary" style="margin-left: 1em">Cancel</button>

                </div>

            </div>

        </div>

        <br>

        <div class="CustomerProfileTypes-body">

            <form>

                <div class="form-group row">

                    <label for="Name" class="col-sm-2 col-form-label">Name</label>

                    <div class="col-sm-5">

                        <input type="text" class="form-control" id="inputText">

                        <input class="form-check-input" type="checkbox" id="gridCheck">

                        <label id="gridCheck"> Active</label>

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>

但我需要获得如下所示的输出并对齐界面中的所有内容。

名称也需要居中，文本框和复选框也应该对齐。

我还是个初学者，谁能帮助我。

Answer 1

对于您想要达到的结果，可以有两种解决方案。像您现在使用的那样使用引导列。使用弹性盒解决方案 1&nbsp;对您的代码稍作更改：<div class="row">&nbsp; <div class="col-md-6>&nbsp; &nbsp; <h2 class="card-title">Customer Profile Types</h2>&nbsp; </div>&nbsp; <div class="col-md-6 text-right">&nbsp; &nbsp; <button class="btn btn-primary">Add</button>&nbsp; &nbsp; <button class="btn btn-primary" style="margin-left: 1em">Update</button>&nbsp; &nbsp; <button class="btn btn-primary" style="margin-left: 1em">Cancel</button>&nbsp; </div></div>解决方案 2 没有引导行和列，纯 Flexbox（使用引导类）。<div class="d-flex justify-content-between align-items-center">&nbsp; <h2 class="card-title">Customer Profile Types</h2>&nbsp; <div>&nbsp; &nbsp; <button class="btn btn-primary">Add</button>&nbsp; &nbsp; <button class="btn btn-primary" style="margin-left: 1em">Update</button>&nbsp; &nbsp; <button class="btn btn-primary" style="margin-left: 1em">Cancel</button>&nbsp; </div></div>

Answer 2

<div class="col-lg-12" style="padding: 10px"><div class="card m-b-30">&nbsp; &nbsp; <div class="card-header container-fluid">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 class="card-title" style="padding: 10px">Customer Profile Types</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div align="right" class="col-md-8 float-right">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn btn-primary">Add</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn btn-primary" style="margin-left: 1em">Update</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn btn-primary" style="margin-left: 1em">Cancel</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <br>&nbsp; &nbsp; <div class="CustomerProfileTypes-body">&nbsp; &nbsp; &nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="Name" class="col-sm-2 col-form-label" style="text-align: center"> Name</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control" id="inputText">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-check-input" type="checkbox" id="gridCheck" style="margin-left: 2px" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label id="gridCheck" style="margin-left: 15px"> Active </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </div></div>

Answer 3

如果你想使用 CSS，请尝试在该 div 上使用具有“&nbsp;space- Between ”属性的flexbox （因为是父亲）：<div&nbsp;class="card-header&nbsp;container-fluid">它应该在 h2 和 B 的元素之间留出空间。