bootstrap 水平對齊元素

Question

我不明白為什么我的按鈕沒有與輸入字段對齊。 我以引導程序為例

 <:-- 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>

Answer 1

只需將 label 移出彈性容器即可：

 <:-- 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>

Answer 2

這是更新標記

 <:-- 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>