我正在嘗試像這里的影像一樣布局一個部分。
我正在使用引導程式 4。我嘗試使用行和列進行布局，但永遠無法實作這種外觀。現在我正在使用<ul>and <li>。在里面<li>我有 3 個輸入。我嘗試將所有三個都放在 a 中<div >，還嘗試將它們分成單獨的“表單組”div，但沒有運氣。我敢肯定，我對如何布置東西還不夠了解。我希望有人可以幫助我理解，也許可以幫助我。
這和我來的時候一樣近，但我似乎無法獲得正確的寬度，它似乎打破了新的路線。
<div id="cardBody" class="card-body">
<div class="row">
<div class="container-fluid">
<div class="col-md-6">
<label class="control-label ml-2">Description</label>
</div>
<div class="col-md-4">
<label class="control-label">Link</label>
</div>
<div class="col-md-1">
<label class="control-label">Count</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form>
<ul id="itemList" class="list-group">
<li class="list-group-item">
<div class="form-group form-inline mb-0">
<label for="description">⋮⋮</label>
<input type="text" class="form-control ml-2 mr-2" id="description" placeholder="">
<label class="sr-only" for="link">Link</label>
<input type="text" class="form-control mr-2" id="link" placeholder="">
<label class="sr-only" for="count">Count</label>
<input type="text" class="form-control mr-2" id="count" placeholder="">
</div>
</li>
<li class="list-group-item">
<div class="form-group form-inline mb-0">
<label for="description2">⋮⋮</label>
<input type="text" class="form-control ml-2 mr-2" id="description2" placeholder="">
<label class="sr-only" for="link2">Link</label>
<input type="text" class="form-control mr-2" id="link2" placeholder="">
<label class="sr-only" for="count2">Count</label>
<input type="text" class="form-control mr-2" id="count2" placeholder="">
</div>
</li>
<li class="list-group-item">⋮⋮</li>
<li class="list-group-item">4</li>
<li class="list-group-item">5</li>
<li class="list-group-item">6</li>
</ul>
</form>
</div>
</div>
</div>
無論如何，提前感謝您提供的任何幫助或見解。
uj5u.com熱心網友回復：
這對我有用。您可能希望將行內樣式放入您的 css 檔案中。
<div class="container">
<div id="cardBody" class="card-body">
<div class="row">
<div class="container-fluid d-flex">
<div class="col-md-7">
<label class="control-label ml-4">Description</label>
</div>
<div class="col-md-4">
<label class="control-label">Link</label>
</div>
<div class="col-md-1">
<label class="control-label">Count</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form>
<ul id="itemList" class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">⋮⋮</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">2</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">3</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">4</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-7 form-group form-inline mb-0">
<div class="d-flex" style="width: 100%;">
<label for="description">5</label>
<input type="text" class="form-control ml-2" id="description" placeholder="" style="width: 100%;">
</div>
</div>
<div class="col-4 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="link" placeholder="" style="width: 100%;">
</div>
<div class="col-1 form-group form-inline mb-0" style="width: 100%;">
<input type="text" class="form-control mr-2" id="count" placeholder="" style="width: 100%;">
</div>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485903.html