为什么引导D-flex类阻止我的div伸展100％的宽度？

Question

I've got a div wherein I want two elements to set side by side: a search input field and corresponding search submit button.

So far I've tried to accomplish this with the following code:

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

The d-flex does what I want. It puts the search field and the button side by side. The problem I'm encountering is that it also leaves about 4 columns of white space between that div and the next. In other words, it doesn't stretch the full 7 columns I've specified. How can I resolve that issue, without pushing my button to the next line?

Answer 1

Well, your col-7 ( which contains the input and button ) has the right width, the problem is that your input and button do not cover the whole width of their parent ( the col-7 ) .

So you can add some bootstrap classes to the input ( for eg col-8 ) and to the button ( for eg col-4 ). That way they will cover the whole width of their parent.

You can also style them directly with CSS ( give them custom widths in % ) or use other bootstrap classes ( col-9 col-3 etc. )

OR you could add

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

this way , the input will occupy all the remaining space inside the col-7 parent

See example in snippet below ( using col-8 and col-4 ) or 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 splits the elements widths into 12 columns. 100% = 12 col-1. So if you want two side-by-side elements to cover the full width of the parent, their 'column numbers' must add up to 12. ( col-8 and col-4 , col-6 col-6, col-9 col-3 etc. )