我有以下標記。
<div class="row">
<div class="col-md-6">
<h4>Title</h4>
</div>
<div class="col-md-6 form-inline">
<div class="form-group">
<label for="TrackId">Track:</label>
<select class="form-control mb-2 mx-sm-4" data-val="true" data-val-required="The Track: field is required." id="TrackId" name="TrackId">
<option selected="selected" value="1">Track A</option>
<option value="2">Track B</option>
<option value="3">Track C aslkdfjaksdfjlskjdflaksdjfklasjdlksdjf</option>
</select>
</div>
</div>
</div>
它看起來像這樣：
如何在容器中右對齊我的<label>和<select>元素<div>？
uj5u.com熱心網友回復：
添加ml-auto到您的form-groupdiv 應該可以解決問題
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-md-6">
<h4>Title</h4>
</div>
<div class="col-md-6 form-inline">
<div class="form-group ml-auto">
<label for="TrackId">Track:</label>
<select class="form-control mb-2 mx-sm-4" data-val="true" data-val-required="The Track: field is required." id="TrackId" name="TrackId">
<option selected="selected" value="1">Track A</option>
<option value="2">Track B</option>
<option value="3">Track C aslkdfjaksdfjlskjdflaksdjfklasjdlksdjf</option>
</select>
</div>
</div>
</div>uj5u.com熱心網友回復：
在這種情況下，d-flex您可以使用 Bootstrap 的實用程式類。align-items-center請參閱下面的片段：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-md-6 col-sm-6">
<h4>Title</h4>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group d-flex align-items-center gap-3">
<label for="TrackId">Track:</label>
<select class="form-control" data-val="true" data-val-required="The Track: field is required." id="TrackId" name="TrackId">
<option selected="selected" value="1">Track A</option>
<option value="2">Track B</option>
<option value="3">Track C aslkdfjaksdfjlskjdflaksdjfklasjdlksdjf</option>
</select>
</div>
</div>
</div>如果您將這些實用程式類轉換為 CSS，那么它只是意味著：
display: flex;
flex-direction: row; /*default value for `flexbox`*/
align-items: center;
uj5u.com熱心網友回復：
您可以將.justify-content-between課程與課程一起使用.row。
<div class="row justify-content-between">
....
</div>
其余的由 flex 完成。
uj5u.com熱心網友回復：
代碼應該是這樣的，
<div class="row justify-content-between">
// Other elements here
</div>
.justify-content-between這是在 BS5 的類中構建的。希望這將起作用，讓我們嘗試一下。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/425601.html
上一篇：Div的最高位置不為0%