如何將輸入標簽與div標簽的底部對齊，第二個div的輸入標簽與標簽日期收集的金額應與底部對齊。嘗試添加 text-alignment-bottom 但它不起作用。<div class="row col-sm-12" style="border: thin solid black "> <div class="row " margin-top:4px> <div class="col-sm-4 col-lg-2"> <label class="description" for="element_2"> Amount payable on this date </label> <input type="number" required="required" class="form-control" name='amountdue' id="amountDue" onkeyup="diffInCollection()"> </div> <div class="col-sm-4 col-lg-2"> <label class="description" for="element_2">Amount collected on date </label> <input type="number" required="required" class="form-control text-bottom " name='collectedamount' align="bottom" id="amountCollected" onkeyup="diffInCollection()"> </div> <div class=" col-sm-4 col-lg-2"> <label class="description" for="element_2">Shortfall in collections for the day </label> <input type="number" required="required" class="form-control" name='shortfall' id="shortfall" value=""> </div> </div></div>
2 回答
不負相思意
TA貢獻1777條經驗 獲得超10個贊
您可以添加 flex 屬性.col-sm-4
.col-sm-4 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row col-sm-12" style="border: thin solid black ">
<div class="row " margin-top:4px>
<div class="col-sm-4 col-lg-2">
<label class="description" for="element_2"> Amount payable on this date </label>
<input type="number" required="required" class="form-control" name='amountdue' id="amountDue" onkeyup="diffInCollection()">
</div>
<div class="col-sm-4 col-lg-2">
<label class="description" for="element_2">Amount collected on date </label>
<input type="number" required="required" class="form-control" name='collectedamount' align="bottom" id="amountCollected" onkeyup="diffInCollection()">
</div>
<div class="col-sm-4 col-lg-2">
<label class="description" for="element_2">Shortfall in collections for the day </label>
<input type="number" required="required" class="form-control" name='shortfall' id="shortfall" value="">
</div>
</div>
</div>
慕容708150
TA貢獻1831條經驗 獲得超4個贊
您可以通過使用flexbox來實現您的目標。
使用引導類
您需要add d-flex flex-column justify-content-between在您的所有內容中col-sm-4。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row col-sm-12" style="border: thin solid black ">
<div class="row" style="margin-top:4px" >
<div class="col-sm-4 col-lg-2 d-flex flex-column justify-content-between">
<label class="description" for="element_2"> Amount payable on this date </label>
<input type="number" required="required" class="form-control" name='amountdue' id="amountDue" onkeyup="diffInCollection()">
</div>
<div class="col-sm-4 col-lg-2 d-flex flex-column justify-content-between">
<label class="description" for="element_2">Amount collected </label>
<input type="number" required="required" class="form-control text-bottom" name='collectedamount' align="bottom" id="amountCollected" onkeyup="diffInCollection()">
</div>
<div class=" col-sm-4 col-lg-2 d-flex flex-column justify-content-between">
<label class="description" for="element_2">Shortfall in collections for the day </label>
<input type="number" required="required" class="form-control" name='shortfall' id="shortfall" value="">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
使用 CSS 類
我在 center_input 類中添加了以下 CSS，這樣您的問題就會得到解決
注意：不要將CSS添加到col-sm-4其他所有內容col-sm-4類應用此CSS
.center_input {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row col-sm-12" style="border: thin solid black ">
<div class="row" style="margin-top:4px" >
<div class="col-sm-4 col-lg-2 center_input">
<label class="description" for="element_2"> Amount payable on this date </label>
<input type="number" required="required" class="form-control" name='amountdue' id="amountDue" onkeyup="diffInCollection()">
</div>
<div class="col-sm-4 col-lg-2 center_input">
<label class="description" for="element_2">Amount collected </label>
<input type="number" required="required" class="form-control text-bottom" name='collectedamount' align="bottom" id="amountCollected" onkeyup="diffInCollection()">
</div>
<div class=" col-sm-4 col-lg-2 center_input">
<label class="description" for="element_2">Shortfall in collections for the day </label>
<input type="number" required="required" class="form-control" name='shortfall' id="shortfall" value="">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
- 2 回答
- 0 關注
- 188 瀏覽
添加回答
舉報
0/150
提交
取消