我使用了下面的代碼，輸出的界面如下圖所示。<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><div class="col-lg-12"> <div class="card m-b-30"> <div class="card-header container-fluid"> <div class="row"> <h2 class="card-title">Customer Profile Types</h2> <div class="col-md-4 float-right"> <button class="btn btn-primary">Add</button> <button class="btn btn-primary" style="margin-left: 1em">Update</button> <button class="btn btn-primary" style="margin-left: 1em">Cancel</button> </div> </div> </div> <br> <div class="CustomerProfileTypes-body"> <form> <div class="form-group row"> <label for="Name" class="col-sm-2 col-form-label">Name</label> <div class="col-sm-5"> <input type="text" class="form-control" id="inputText"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label id="gridCheck"> Active</label> </div> </div> </form> </div> </div></div>但我需要獲得如下所示的輸出并對齊界面中的所有內容。名稱也需要居中，文本框和復選框也應該對齊。我還是個初學者，誰能幫助我。
3 回答
一只萌萌小番薯
TA貢獻1795條經驗 獲得超7個贊
對于您想要達到的結果，可以有兩種解決方案。
像您現在使用的那樣使用引導列。
使用彈性盒
解決方案 1 對您的代碼稍作更改：
<div class="row">
<div class="col-md-6>
<h2 class="card-title">Customer Profile Types</h2>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
解決方案 2 沒有引導行和列，純 Flexbox（使用引導類）。
<div class="d-flex justify-content-between align-items-center">
<h2 class="card-title">Customer Profile Types</h2>
<div>
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
慕村225694
TA貢獻1880條經驗 獲得超4個贊
<div class="col-lg-12" style="padding: 10px">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title" style="padding: 10px">Customer Profile Types</h2>
<div align="right" class="col-md-8 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label" style="text-align: center"> Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck" style="margin-left: 2px" >
<label id="gridCheck" style="margin-left: 15px"> Active </label>
</div>
</div>
</form>
</div>
</div>
MMTTMM
TA貢獻1869條經驗 獲得超4個贊
如果你想使用 CSS，請嘗試在該 div 上使用具有“ space- Between ”屬性的flexbox （因為是父親）：
<div class="card-header container-fluid">
它應該在 h2 和 B 的元素之間留出空間。
- 3 回答
- 0 關注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消