Как выровнять мои кнопки вправо и отцентрировать заголовок?

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. Используйте bootstrap столбцов, которые вы используете прямо сейчас.
2. Используйте 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, чистый 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

<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, попробуйте использовать flexbox со свойством " пробел между " в этом div (потому что это отец):

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

Должно быть пространство между элементами h2 и B.