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

针对您要达到的结果，可以有两种解决方案。

像现在使用的那样使用引导程序列。
使用flexbox

解决方案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 没有bootstrap行和col，则为纯flexbox（使用bootstrap类）。

<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

如果要使用CSS，请尝试在此div上使用属性为 space-between 的 flexbox （因为是父亲）：

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

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

Answer 3

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

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

3 个答案: