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

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. 像您现在使用的那样使用引导列。

2. 使用弹性盒

解决方案 1 对您的代码稍作更改：

<div class="row">

  <div class="col-md-6>

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

  </div>

  <div class="col-md-6 text-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>

解决方案 2 没有引导行和列，纯 Flexbox（使用引导类）。

<div class="d-flex justify-content-between align-items-center">

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

  <div>

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

Answer 2

<div class="col-lg-12" style="padding: 10px">

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

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

        <div class="row">

            <h2 class="card-title" style="padding: 10px">Customer Profile Types</h2>

            <div align="right" class="col-md-8 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" style="text-align: center"> Name</label>

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

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

                    <input class="form-check-input" type="checkbox" id="gridCheck" style="margin-left: 2px" >

                    <label id="gridCheck" style="margin-left: 15px"> Active </label>

                </div>

            </div>

        </form>

    </div>

</div>

Answer 3

如果你想使用 CSS，请尝试在该 div 上使用具有“ space- Between ”属性的flexbox （因为是父亲）：

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

它应该在 h2 和 B 的元素之间留出空间。