Как разместить группу ввода вместе с текстом?
Я пытаюсь поместить свою группу ввода в строку с текстом примерно так:
Но вместо этого группа ввода отображается в блоке, я попытался поместить все в сетку, указав текст col-8, но я бы расширил текст как можно ближе к группе ввода.
Вот мой код:
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin = "anonymous">
<div role = "tabpanel" id = "panel-1" aria-labelledby = "panel-1-header" class = "collapse show">
<div class = "card-body">
<div _ngcontent-ken-c136 = "" class = "form-group"> BACON +1,00 €
<div _ngcontent-ken-c136 = "" class = "input-group">
<div _ngcontent-ken-c136 = "" class = "input-group-prepend"><button _ngcontent-ken-c136 = "" disabled = "" class = "btn btn-outline-dark" control-id = "ControlID-984">-</button></div><input _ngcontent-ken-c136 = "" type = "number" disabled = "" class = "form-control" control-id = "ControlID-985">
<div _ngcontent-ken-c136 = ""
class = "input-group-append"><button _ngcontent-ken-c136 = "" class = "btn btn-success" control-id = "ControlID-986">+</button></div>
</div>
</div>
<div _ngcontent-ken-c136 = "" class = "form-group"> STELLE FILANTI
<div _ngcontent-ken-c136 = "" class = "input-group">
<div _ngcontent-ken-c136 = "" class = "input-group-prepend"><button _ngcontent-ken-c136 = "" disabled = "" class = "btn btn-outline-dark" control-id = "ControlID-987">-</button></div><input _ngcontent-ken-c136 = "" type = "number" disabled = "" class = "form-control" control-id = "ControlID-988">
<div _ngcontent-ken-c136 = ""
class = "input-group-append"><button _ngcontent-ken-c136 = "" class = "btn btn-success" control-id = "ControlID-989">+</button></div>
</div>
</div>
<div _ngcontent-ken-c136 = "" class = "form-group"> CAPPUCCINO
<div _ngcontent-ken-c136 = "" class = "input-group">
<div _ngcontent-ken-c136 = "" class = "input-group-prepend"><button _ngcontent-ken-c136 = "" disabled = "" class = "btn btn-outline-dark" control-id = "ControlID-990">-</button></div><input _ngcontent-ken-c136 = "" type = "number" disabled = "" class = "form-control" control-id = "ControlID-991">
<div _ngcontent-ken-c136 = ""
class = "input-group-append"><button _ngcontent-ken-c136 = "" class = "btn btn-success" control-id = "ControlID-992">+</button></div>
</div>
</div>
<div _ngcontent-ken-c136 = "" class = "form-group"> CIOCCOLATA IN TAZZA
<div _ngcontent-ken-c136 = "" class = "input-group">
<div _ngcontent-ken-c136 = "" class = "input-group-prepend"><button _ngcontent-ken-c136 = "" disabled = "" class = "btn btn-outline-dark" control-id = "ControlID-993">-</button></div><input _ngcontent-ken-c136 = "" type = "number" disabled = "" class = "form-control" control-id = "ControlID-994">
<div _ngcontent-ken-c136 = ""
class = "input-group-append"><button _ngcontent-ken-c136 = "" class = "btn btn-success" control-id = "ControlID-995">+</button></div>
</div>
</div>
<!--bindings = {
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--><button _ngcontent-ken-c136 = "" type = "button" class = "btn btn-sm btn-outline-dark float-right mb-3" control-id = "ControlID-996"> Step successivo </button>
<!--bindings = {
"ng-reflect-ng-template-outlet": "[object Object]"
}-->
</div>
</div>Благодаря @AwatITWork здесь окончательное решение
.btn-circle {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
padding: 6px 0px !important;
border-radius: 15px !important;
font-size: 8px !important;
text-align: center !important;
}
.input-group .form-control {
text-align: center !important;
}
.form-quantity-custom input {
background: none !important;
border: 0 !important;
padding-top: 0 !important;
}<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin = "anonymous">
<div role = "tabpanel" id = "panel-1" aria-labelledby = "panel-1-header" class = "ng-star-inserted collapse show">
<div class = "card-body">
<div _ngcontent-off-c136 = "" class = "row row-cols-2 mb-1 align-content-between ng-star-inserted">
<div _ngcontent-off-c136 = "" class = "col-7" style = "margin-right: auto;">BACON +1,00 €</div>
<div _ngcontent-off-c136 = "" class = "col-4">
<div _ngcontent-off-c136 = "" class = "input-group form-quantity-custom"><button _ngcontent-off-c136 = "" disabled = "" class = "btn btn-circle btn-outline-dark" control-id = "ControlID-992">-</button><input _ngcontent-off-c136 = "" type = "number" value = "1" disabled = "" class = "form-control" control-id = "ControlID-993"><button _ngcontent-off-c136 = ""
class = "btn btn-circle btn-success" control-id = "ControlID-994">+</button></div>
</div>
</div>
</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
32
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Я не очень хорошо разбираюсь в начальной загрузке, но, надеюсь, это поможет вам:
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin = "anonymous">
<div role = "tabpanel" id = "panel-1" aria-labelledby = "panel-1-header" class = "collapse show">
<div class = "card-body">
<div _ngcontent-ken-c136 = "" class = "form-group row">
<div class = "col"> BACON +1,00 €</div>
<div _ngcontent-ken-c136 = "" class = "input-group col sm">
<div _ngcontent-ken-c136 = "" class = "input-group-prepend"><button _ngcontent-ken-c136 = "" disabled = "" class = "btn btn-outline-dark" control-id = "ControlID-984">-</button></div><input _ngcontent-ken-c136 = "" type = "number" disabled = "" class = "form-control" control-id = "ControlID-985">
<div _ngcontent-ken-c136 = "" class = "input-group-append"><button _ngcontent-ken-c136 = "" class = "btn btn-success" control-id = "ControlID-986">+</button></div>
</div>
</div>
<div _ngcontent-ken-c136 = "" class = "form-group row">
<div class = "col">STELLE FILANTI</div>
<div _ngcontent-ken-c136 = "" class = "input-group col">
<div _ngcontent-ken-c136 = "" class = "input-group-prepend"><button _ngcontent-ken-c136 = "" disabled = "" class = "btn btn-outline-dark" control-id = "ControlID-987">-</button></div><input _ngcontent-ken-c136 = "" type = "number" disabled = "" class = "form-control" control-id = "ControlID-988">
<div _ngcontent-ken-c136 = "" class = "input-group-append"><button _ngcontent-ken-c136 = "" class = "btn btn-success" control-id = "ControlID-989">+</button></div>
</div>
</div>
<div _ngcontent-ken-c136 = "" class = "form-group row">
<div class = "col">CAPPUCCINO</div>
<div _ngcontent-ken-c136 = "" class = "input-group col">
<div _ngcontent-ken-c136 = "" class = "input-group-prepend"><button _ngcontent-ken-c136 = "" disabled = "" class = "btn btn-outline-dark" control-id = "ControlID-990">-</button></div><input _ngcontent-ken-c136 = "" type = "number" disabled = "" class = "form-control" control-id = "ControlID-991">
<div _ngcontent-ken-c136 = "" class = "input-group-append"><button _ngcontent-ken-c136 = "" class = "btn btn-success" control-id = "ControlID-992">+</button></div>
</div>
</div>
<div _ngcontent-ken-c136 = "" class = "form-group row">
<div class = "col">CIOCCOLATA IN TAZZA</div>
<div _ngcontent-ken-c136 = "" class = "input-group col">
<div _ngcontent-ken-c136 = "" class = "input-group-prepend"><button _ngcontent-ken-c136 = "" disabled = "" class = "btn btn-outline-dark" control-id = "ControlID-993">-</button></div><input _ngcontent-ken-c136 = "" type = "number" disabled = "" class = "form-control" control-id = "ControlID-994">
<div _ngcontent-ken-c136 = "" class = "input-group-append"><button _ngcontent-ken-c136 = "" class = "btn btn-success" control-id = "ControlID-995">+</button></div>
</div>
</div>
<!--bindings = {
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--><button _ngcontent-ken-c136 = "" type = "button" class = "btn btn-sm btn-outline-dark float-right mb-3" control-id = "ControlID-996"> Step successivo </button>
<!--bindings = {
"ng-reflect-ng-template-outlet": "[object Object]"
}-->
</div>
</div> Ответ принят как подходящий
Что ж, у меня была аналогичная проблема с моим веб-сайтом электронной коммерции, я решил ее с помощью этого, я уверен, что вы это понимаете, но позвольте мне объяснить, что я сделал, каждый элемент карты имеет что-то вроде этого, он увеличивается или уменьшается, а также кнопка удаления для удаления текущего элемента, каждый с уникальным идентификатором.
надеюсь, это поможет и вам:
<div class = "row row-cols-2 mb-1 align-content-between">
<div class = "col-7" style = "margin-right: auto;">
<div class = "row text-center" style = "min-width: 200px;">
<div style = "width: fit-content !important;border: 1px black solid; margin: 0px 20px 0px 20px;padding: 0px; border-radius: 5px;" >
<span style = "float: left; width: 15% !important; border-radius: 5px 0px 0px 5px;" role = "button" id = "1-qty-dec">-</span>
<input style = "width: 70% !important;" class = "w-50 text-center numbersOnly" min = "1" value = "1" step = "1" type = "number" name = "qty" id = "row-1-qty" required>
<span style = "float: right; width: 15% !important; border-radius: 0px 5px 5px 0px;" role = "button" id = "1-qty-inc">+</span>
</div>
</div>
</div>
<div class = "col-4">
<span class = "btn btn-danger" role = "button" style = "float: right;padding-top: 0.1em;padding-bottom: 0.1em;">Delete</span>
</div>
</div>
Я добавлю это в ваш текущий шаблон, чтобы вы могли увидеть его здесь.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Stack19</title>
</head>
<body>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin = "anonymous">
<div role = "tabpanel" id = "panel-1" aria-labelledby = "panel-1-header" class = "collapse show">
<div class = "card-body">
<div _ngcontent-ken-c136 = "" class = "form-group"> BACON +1,00 €
<div _ngcontent-ken-c136 = "" class = "input-group">
<div _ngcontent-ken-c136 = "" class = "input-group-prepend"><button _ngcontent-ken-c136 = "" disabled = "" class = "btn btn-outline-dark" control-id = "ControlID-984">-</button></div><input _ngcontent-ken-c136 = "" type = "number" disabled = "" class = "form-control" control-id = "ControlID-985">
<div _ngcontent-ken-c136 = ""
class = "input-group-append"><button _ngcontent-ken-c136 = "" class = "btn btn-success" control-id = "ControlID-986">+</button></div>
</div>
</div>
<div _ngcontent-ken-c136 = "" class = "form-group"> STELLE FILANTI
<div _ngcontent-ken-c136 = "" class = "input-group">
<div _ngcontent-ken-c136 = "" class = "input-group-prepend"><button _ngcontent-ken-c136 = "" disabled = "" class = "btn btn-outline-dark" control-id = "ControlID-987">-</button></div><input _ngcontent-ken-c136 = "" type = "number" disabled = "" class = "form-control" control-id = "ControlID-988">
<div _ngcontent-ken-c136 = ""
class = "input-group-append"><button _ngcontent-ken-c136 = "" class = "btn btn-success" control-id = "ControlID-989">+</button></div>
</div>
</div>
<div _ngcontent-ken-c136 = "" class = "form-group"> CAPPUCCINO
<div _ngcontent-ken-c136 = "" class = "input-group">
<div _ngcontent-ken-c136 = "" class = "input-group-prepend"><button _ngcontent-ken-c136 = "" disabled = "" class = "btn btn-outline-dark" control-id = "ControlID-990">-</button></div><input _ngcontent-ken-c136 = "" type = "number" disabled = "" class = "form-control" control-id = "ControlID-991">
<div _ngcontent-ken-c136 = ""
class = "input-group-append"><button _ngcontent-ken-c136 = "" class = "btn btn-success" control-id = "ControlID-992">+</button></div>
</div>
</div>
<div _ngcontent-ken-c136 = "" class = "form-group"> CIOCCOLATA IN TAZZA
<div _ngcontent-ken-c136 = "" class = "input-group">
<div _ngcontent-ken-c136 = "" class = "input-group-prepend"><button _ngcontent-ken-c136 = "" disabled = "" class = "btn btn-outline-dark" control-id = "ControlID-993">-</button></div><input _ngcontent-ken-c136 = "" type = "number" disabled = "" class = "form-control" control-id = "ControlID-994">
<div _ngcontent-ken-c136 = ""
class = "input-group-append"><button _ngcontent-ken-c136 = "" class = "btn btn-success" control-id = "ControlID-995">+</button></div>
</div>
</div>
<!-- Try doing this... Start-->
<div class = "row row-cols-2 mb-1 align-content-between">
<div class = "col-7" style = "margin-right: auto;">
<div class = "row text-center" style = "min-width: 200px;">
<div style = "width: fit-content !important;border: 1px black solid; margin: 0px 20px 0px 20px;padding: 0px; border-radius: 5px;" >
<span style = "float: left; width: 15% !important; border-radius: 5px 0px 0px 5px;" role = "button" id = "1-qty-dec">-</span>
<input style = "width: 70% !important;" class = "w-50 text-center numbersOnly" min = "1" value = "1" step = "1" type = "number" name = "qty" id = "row-1-qty" required>
<span style = "float: right; width: 15% !important; border-radius: 0px 5px 5px 0px;" role = "button" id = "1-qty-inc">+</span>
</div>
</div>
</div>
<div class = "col-4">
<span class = "btn btn-danger" role = "button" style = "float: right;padding-top: 0.1em;padding-bottom: 0.1em;">Delete</span>
</div>
</div>
<!-- Try doing this... END-->
<!--bindings = {
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--><button _ngcontent-ken-c136 = "" type = "button" class = "btn btn-sm btn-outline-dark float-right mb-3" control-id = "ControlID-996"> Step successivo </button>
<!--bindings = {
"ng-reflect-ng-template-outlet": "[object Object]"
}-->
</div>
</div>
</body>
</html>Это отличная новость @NiceToMytyuk :)
—
22.03.2022 11:18
Другие вопросы по теме
Как сравнить два класса с jquery?
Как мне добавить фон CSS, когда мой переключатель переключается/отмечается в JavaScript?
Как я могу ограничить волновой эффект границей моей кнопки?
Медиа-запрос не работает с этим изображением?
Изменить стиль через флажок
Как сделать Javascript (матричный код дождя) фоном сайта
Почему размер видеоплеера меняется, когда я добавляю изображение постера?
Бумажный компонент в пользовательском интерфейсе материала выходит за пределы фонового изображения
CSS Grid: как изменить поток сетки?
Масштаб SVG (отцентрируйте ориганы)
Похожие вопросы
Почему EventListener перезагружает страницу, а onclick нет?
Когда вы должны использовать ng-контент и шаблон компонента с входными данными и в чем разница?
Является ли #myId таким же, как id="myId" в HTML?
Анализировать объекты json, разделенные строками, в таблице html
Как сравнить два класса с jquery?
Как я могу ограничить волновой эффект границей моей кнопки?
Очередь кадров анимации и очередь микрозадач
Как я могу вызвать функцию в элементе mat-error?
Как я могу вывести значения из таблицы Excel на своем веб-сайте?
Как добавить реактивный объект в заголовок вторичного столбца в выходной таблице?
Я немного изменил ваше решение и получил его, я бы обновил вопрос решением