Как выровнять метку на строке в Bootstrap?

Я добавил модальное окно и хотел бы, чтобы метка была на одной строке. Думаю, мне нужно уменьшить ввод и увеличить ширину метки.

Но... Вы знаете, как это сделать на Bootstrap? Я потерялся в своих дивах.

Ниже приведена идея моего текущего кода:

Спасибо за помощь.

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/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>

Пожалуйста, исправьте свои теги, чтобы была только одна версия. Кроме того, вы читали документы сетки? Там все довольно четко прописано, как размеры столбцов.

— 03.05.2022 20:03

bootstrap-4 bootstrap-modal bootstrap5-modal

03.05.2022 17:29

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В Bootstrap есть сеточная система, в которой весь экран разделен на 12 столбцов. Вы назначаете каждой метке 2 столбца и каждому полю ввода 10 столбцов, используя классы col-sm-2 и col-sm-10. Если вы измените числа там, вы можете изменить количество столбцов, занимаемых каждым полем. Например, если вы измените класс метки на `col-sm-4', а класс ввода на '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/[email protected]/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>

03.05.2022 17:47

Другие вопросы по теме

Как упростить этот модальный код с помощью цикла в javascript

Bootstrap Modal ajax отправляет два раза при отправке

Laravel: как отображать динамические данные во всплывающем окне, связанные с изображением, при каждом нажатии на изображение

Заполнять карты и модальные окна через тот же файл json, используя реакцию (-bootstrap)?

Модальное окно Bootstrap не появляется при нажатии кнопки

Дублирование модального содержимого

Передача данных из контроллера в заголовок в модальном режиме

Как передать переменные в модальную форму начальной загрузки и запустить запрос mysql

Невозможно изменить информацию заголовка — заголовки, уже отправленные выводом, начинаются с /home/nyehfdcj/public_html/application/controllers/admin/Login.php:16

Bootboxjs неверный тип приглашения - пример из документации не работает

Как выровнять метку на строке в Bootstrap?

Ответы 1

Другие вопросы по теме

Похожие вопросы