我正在嘗試將我的輸入組與這樣的文本行內:

但是輸入組顯示在一個塊中,我試圖通過給出文本將所有內容放在一個網格中,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>
uj5u.com熱心網友回復:
好吧,我的電子商務網站也有類似的問題,我已經解決了這個問題,我相信你理解它,但讓我解釋一下我做了什么,每個卡片專案都有這樣的東西,它會增加或減少,而且用于洗掉當前專案的洗掉按鈕,每個專案都有一個唯一的 id。
希望它也能幫助你:
<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>
uj5u.com熱心網友回復:
我不太了解引導程式,但希望這會對您有所幫助:
<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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/446918.html
上一篇:css未正確呈現
下一篇:如何將漣漪效果限制在按鈕的邊框?
