我不知道為什么我的按鈕與輸入欄位不對齊。我以引導程式為例
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="row">
<div class="d-flex flex-row">
<div class="col-8">
<div class="form-group">
<label>Search:</label>
<input type="text" name="name" id="search-id" autocomplete="off" class="form-control" placeholder="Required" />
</div>
</div>
<div class="col-1">
<div class="">
<button class="btn btn-primary" onclick="load();">Load</button>
</div>
</div>
</div>
</div>
uj5u.com熱心網友回復：
只需將標簽移到 flex-container 之外：
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<label>Search:</label>
<div class="row">
<div class="d-flex flex-row">
<div class="col-8">
<div class="form-group">
<input type="text" name="name" id="search-id" autocomplete="off" class="form-control" placeholder="Required" />
</div>
</div>
<div class="col-1">
<div class="">
<button class="btn btn-primary" onclick="load();">Load</button>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
這是更新標記
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="container">
<p>Search</p>
<div class="row d-flex justify-content-flex-end">
<div class="col-8">
<div class="form-group">
<input type="text" name="name" id="search-id" autocomplete="off" class="form-control" placeholder="Search Here" />
</div>
</div>
<div class="col-1">
<div class="">
<button class="btn btn-primary" onclick="load();">Load</button>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/443700.html