為什么引導D-flex類阻止我的div伸展100％的寬度？

Question

我有一個div，其中我希望兩個元素並排設置：一個搜索輸入字段和相應的搜索提交按鈕。

到目前為止，我已經嘗試使用以下代碼完成此操作：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="css/custom.css"> <div class="container w-100 mt-4 border-bottom pb-3 h-25 align-content-center" style="box-sizing: border-box;"> <div class="row"> <div class="col-1 position-relative d-flex align-items-center"><span class="mh-100" style="line-height: 1rem">Class20</span> </div> <div class="col-7 mw-100 align-items-center position-relative d-flex"> <form action="" class="justify-content-center position-relative m-0"> <input type="search" name="" value="" placeholder="search" class="w-100 align-items-center pl-3" id="search"> </form> <button class="btn-outline-primary"type="submit">Search</button> </div> <!--column 7--> <div class="col-4"> <button class="btn-outline-primary"type="submit">Log In</button> <button class="btn-outline-primary"type="submit">Sell your stuff</button> </div> <!-- col-4 --> </div> <!--row--> </div> 

d-flex可以滿足我的要求。 它將搜索字段和按鈕並排放置。 我遇到的問題是，在該div和下一個div之間還留下了大約4列空白。 換句話說，它不會擴展我指定的全部7列。 如何解決該問題，而無需將我的按鈕按到下一行？

Answer 1

好吧，您的col-7 （包含輸入和按鈕）具有正確的寬度，問題是您的輸入和按鈕沒有覆蓋其父對象（col-7）的整個寬度。

因此，您可以向輸入（例如col-8 ）和按鈕（例如col-4 ）添加一些引導類。 這樣，它們將覆蓋其父對象的整個寬度。

您也可以直接使用CSS設置樣式（以％為其提供自定義寬度）或使用其他引導程序類（col-9 col-3等）。

或者您可以添加

.d-flex form{
  flex-grow: 1
}

這樣，輸入將占據col-7父級內部的所有剩余空間

請參閱下面的代碼段示例（使用col-8和col-4）或jsFIddle

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container w-100 mt-4 border-bottom pb-3 h-25 align-content-center" style="box-sizing: border-box;"> <div class="row"> <div class="col-1 position-relative d-flex align-items-center"><span class="mh-100" style="line-height: 1rem">Class20</span> </div> <div class="col-7 mw-100 align-items-center position-relative d-flex"> <form action="" class="justify-content-center position-relative m-0 col-8"> <input type="search" name="" value="" placeholder="search" class="w-100 align-items-center pl-3 " id="search"> </form> <button class="btn-outline-primary col-4" type="submit">Search</button> </div> <!--column 7--> <div class="col-4"> <button class="btn-outline-primary" type="submit">Log In</button> <button class="btn-outline-primary" type="submit">Sell your stuff</button> </div> <!-- col-4 --> </div> <!--row--> </div> 

Bootstrap將元素的寬度分為12列。 100％= 12 col-1。 因此，如果您希望兩個並排的元素覆蓋父對象的整個寬度，則它們的“列號”必須加起來為12。（col-8和col-4，col-6 col-6，col-9 col-3等）