如何对齐 Bootstrap 中一行的标签？

Question

我添加了一个模式，我希望标签在一行上。我想我需要减少输入并增加标签的宽度。

但是...您知道如何在 Bootstrap 上执行此操作吗？我迷失在我的 div 中。

下面是我当前代码的想法：

感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Simple modal</h4>
    <button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.hide()">
    </button>

</div>
<div class="modal-body">
    <form>
        <div class="row ">
            <div class="col-12">
                <div class="row">
                    <div class="col-12 col-sm-12 mb-2">
                        <div class="form-group row">
                            <label for="cliente" class="col-sm-2 col-form-label text-end">Quantité a transférer</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="cliente">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row ">
            <div class="col-12">
                <div class="row">
                    <div class="col-12 col-sm-12 mb-2">
                        <div class="form-group row">
                            <label for="endereco" class="col-sm-2 col-form-label text-end">Changement Bénéficiaire Économique</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="endereco">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row ">
            <div class="col-12">
                <div class="row">
                    <div class="col-12 col-sm-12 mb-2">
                        <div class="form-group row">
                            <label for="complemento" class="col-sm-2 col-form-label text-end">Compte du destinataire</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="complemento">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Send message</button>
</div>
</body>
</html>

Answer 1

Bootstrap 有一个网格系统，整个屏幕分为 12 列。您使用 classes col-sm-2 和 col-sm-10 为每个标签分配 2 列，为每个输入框分配 10 列。如果您更改那里的数字，则可以更改每个字段占用的列数。例如，如果将标签 class 更改为 `col-sm-4' 并将输入 class 更改为 'col-sm-8'，则标签将占据屏幕的 1/3（ 4/12 列）并且输入将占据屏幕的 2/3（8/12 列）。您可以更改这些数字以获得适合您的值。

下面的示例显示了 3 个不同的列数值，因此您可以了解其工作原理。

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Simple modal</h4>
    <button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.hide()">
    </button>

</div>
<div class="modal-body">
    <form>
        <div class="row ">
            <div class="col-12">
                <div class="row">
                    <div class="col-12 col-sm-12 mb-2">
                        <div class="form-group row">
                            <label for="cliente" class="col-sm-3 col-form-label text-end">Quantité a transférer</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="cliente">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row ">
            <div class="col-12">
                <div class="row">
                    <div class="col-12 col-sm-12 mb-2">
                        <div class="form-group row">
                            <label for="endereco" class="col-sm-4 col-form-label text-end">Changement Bénéficiaire Économique</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="endereco">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row ">
            <div class="col-12">
                <div class="row">
                    <div class="col-12 col-sm-12 mb-2">
                        <div class="form-group row">
                            <label for="complemento" class="col-sm-5 col-form-label text-end">Compte du destinataire</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="complemento">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Send message</button>
</div>
</body>
</html>

如何对齐 Bootstrap 中一行的标签？

How to align a label on a line in Bootstrap?

bootstrap-modal

bootstrap-4

bootstrap5-modal