文本未在列内换行

Question

I'm working on a small project to learn some basics of HTML & CSS and am currently trying to create the "advanced search" page on Google: https://www.google.com/advanced_search

I've got the structure of the page more or less how I would like it to be, but I'm having some difficult with the responsive functionality. Currently the text in the third column is not wrapping within the divs they are situated in. Here are some screenshots to demonstrate the issue:

Fullscreen (no issues):

Reduced Width (not wrapping within column):

Regarding the second image, the issue is highlighted by the red outline and I would like the text to wrap where the green outline is.

Here is the existing HTML & CSS code:

 @media only screen and (max-width: 960px) { .todoinstructions { display: none; } } #findpageswith { padding: 40px; } .todothisheader { font-weight: bold; font-size: 13px; } .todothismalltext { font-size: 11px; }

 <div class="container-fluid" id="findpageswith"> <div class="row"> <div class="col-sm-3 align-self-center">Find pages with...</div> <div class="col-5"></div> <div class="col-auto align-self-center todothisheader todoinstructions">To do this in the search box.</div> </div> <br> <div class="row"> <div class="col-sm-3 align-self-center">all these words:</div> <div class="col-5"> <input class="form-control" type="text" aria-label="Search"> </div> <div class="col-auto align-self-center todothismalltext todoinstructions">Type the important words: tri-colour rat terrier</div> </div> <br> <div class="row"> <div class="col-sm-3 align-self-center">this exact word or phrase:</div> <div class="col-5"> <input class="form-control" type="text" aria-label="Search"> </div> <div class="col-auto align-self-center todothismalltext todoinstructions">Put exact words in quotes: "rat terrier"</div> </div> <br> <div class="row"> <div class="col-sm-3 align-self-center">any of these words:</div> <div class="col-5"> <input class="form-control" type="text" aria-label="Search"> </div> <div class="col-auto align-self-center todothismalltext todoinstructions">Type OR between all the words you want: miniature OR standard</div> </div> <br> <div class="row"> <div class="col-sm-3 align-self-center">none of these words:</div> <div class="col-5"> <input class="form-control" type="text" aria-label="Search"> </div> <div class="col-auto align-self-center todothismalltext todoinstructions">Put a minus sign just before words that you don't want: -rodent, -"Jack Russell"</div> </div> </div>

I have had a read through the Bootstrap documentation on text wrapping and overflow ( https://getbootstrap.com/docs/4.4/utilities/text/#text-wrapping-and-overflow ), but can't seem to find a way to resolve this issue. I did try using "overflow-wrap:", but to no avail - it is possible that I was using it incorrectly.

If anybody has any ideas for how to resolve this, I would really appreciate the help.

Thank you.

Answer 1

col-auto is not a true bs class I think you just need to set col .

auto is only used for break points like: col-{breakpoint}-auto

BS doc: https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content