Входная группа Bootstrap5 с btn-group-vertical
В качестве заголовка я хочу создать группу ввода для увеличения/уменьшения числа.
Это мой код:
<div class = "input-group input-group-sm">
<input type = "text" class = "form-control" placeholder = "0.9">
<div class = "btn-group-vertical">
<button class = "btn btn-primary btn-sm" type = "button">+</button>
<button class = "btn btn-primary btn-sm" type = "button">-</button>
</div>
</div>
Результат
Ожидаемый результат
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
35
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
добавьте кнопку p-0, чтобы код выглядел так:
<div class = "input-group input-group-sm">
<input type = "text" class = "form-control" placeholder = "0.9">
<div class = "btn-group-vertical">
<button class = "btn btn-primary btn-sm p-0" type = "button">+</button>
<button class = "btn btn-primary btn-sm p-0" type = "button">-</button>
</div>
</div>
Ответ принят как подходящий
Вам нужно добавить py-0 для удаления верхнего и нижнего отступов и lh-1 для уменьшения высоты строки кнопки. Ваш код должен быть следующим:
<div class = "input-group input-group-sm">
<input type = "text" class = "form-control" placeholder = "0.9">
<div class = "btn-group-vertical">
<button class = "btn btn-primary btn-sm py-0 lh-1" type = "button">+</button>
<button class = "btn btn-primary btn-sm py-0 lh-1" type = "button">-</button>
</div>
</div>
Другие вопросы по теме
Как исправить ширину изменяющейся текстовой метки диапазона ввода
Javascript Canvas — CSS-вращающиеся элементы холста оставляют пустые места между -- круговое меню
Неупорядоченный список HTML с количеством столбцов> 1
Можно ли создать контейнер div в форме папки с помощью CSS
Есть ли способ анимировать появляющийся текст в html/css?
Как я могу упростить объекты в CSS или JS для определенных элементов?
Несколько слайд-шоу не работает должным образом. Любая подсказка?
Как центрировать логотип, имея элементы рядом с ним?
Javascript: что означают скобки для ключа объекта? Что делает метод Object.up()?
Укажите дочерний элемент в родительском в svelte
Похожие вопросы
Мне пришлось использовать цикл for, чтобы просмотреть каждый символ в строке, но код не работает должным образом
Замена div на ванильный javascript
Как исправить ширину изменяющейся текстовой метки диапазона ввода
Получение первого брата второго экземпляра с помощью Xpath
Как указать новый идентификатор сеанса каждый раз, когда я обновляю домашнюю страницу, но сохранить один и тот же идентификатор сеанса между всеми страницами?
Добавление значков в группу радио в Blazor
Неупорядоченный список HTML с количеством столбцов> 1
Как скопировать text/html и text/plain в буфер обмена с помощью Java
Найти элемент DOM, используя значение атрибута, которое приобретается динамически?
Можно ли создать контейнер div в форме папки с помощью CSS
Это работа для меня! Спасибо