Блог

Главная - Вопросы по программированию - Как переместить кнопку вправо с помощью начальной загрузки

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

#html #css

#HTML #CSS

Вопрос:

Я даже пытался float right pull-right ml . Кнопка все еще там сидит!! Почему?

введите описание изображения здесь

 lt;main class="container bg-primary"gt;  lt;div class="row g-2"gt;   lt;div class="col-10 bg-danger"gt;  lt;input class="w-100" type="text"gt;  lt;/divgt;  lt;div class="col-2 bg-danger"gt;  lt;button type="button" class="btn btn-info"gt;Warninglt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/maingt;

Ответ №1:

Если вы хотите выровнять кнопку справа внутри col-2, достаточно добавить класс text-right (если вы используете bootstrap 5, используйте text-end).:

 lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/gt; lt;main class="container bg-primary"gt;  lt;div class="row g-2"gt;   lt;div class="col-10 bg-danger"gt;  lt;input class="w-100" type="text"gt;  lt;/divgt;  lt;div class="col-2 bg-danger text-end"gt;  lt;button type="button" class="btn btn-info"gt;Warninglt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/maingt;

Комментарии:

1. Да, именно это я и имею в виду, я пробовал text-right , это не работает

2. Я использую эту ссылку для примера начальной загрузки, lt;link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet"gt;

3. Я только что попробовал, и для меня это работает. Вы правильно вставили текст в col-2? lt;div class=»col-2 bg-опасный текст справа»gt;. Если вы поместите его внутрь кнопки, он не будет работать

4. Я решил эту проблему, вместо этого используется bootstrap 5 text-end text-right . Спасибо

5. Просто отредактировал мой ответ 🙂

Метки: