[英]Stacking one jumbotron on top of each other when reducing screen size
我在Bootstrap 1 of 2、2 of 2中使用自動布局列並排放置了兩個巨無霸。當我減小頁面大小時，兩個只是通過變薄並擴展內容來調整大小，但我希望它們能夠堆疊在一起。 我該怎么辦？ 我已經嘗試過媒體查詢，但是也許在瞄准巨型疊加器時沒有選擇正確的“東西”。 TIA
<div class="container"> <div class="row"> <div class="col"> <div class="jumbotron1 jumbotron-fluid" id="register"> <div class="container1"> <h1 class="display-4">Register your interest!</h1> <p class="lead">Festival days will be free, but seats will be limited, so register your interest early and don't miss out!</p> <form> <div class="form-group"> <div class="row"> <div class="col"> <label for="firstname">First name</label> <input type="text" class="form-control" id="firstname" placeholder="Enter first name"> </div> <div class="col"> <label for="lastname">Last name</label> <input type="text" class="form-control" id="lastname" placeholder="Enter last name"> </div> </div> <br> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <h4>Which days are you interested in?</h4> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">August 5th</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">August 6th</label> </div> <br> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> <label class="form-check-label" for="inlineCheckbox3">August 7th</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> <label class="form-check-label" for="inlineCheckbox3">August 8th</label> </div> <br> <br> <div> <button type="submit" class="btn btn-primary">Submit</button></div> </form> </div> </div> </div> <div class="col"> <div class="jumbotron2" id="latestNews"> <h1 class="display-4">Latest News</h1> <div class="list-group"> </div> <p class="mb-1"><a class="twitter-timeline" href="https://twitter.com/brooklynfest?ref_src=twsrc%5Etfw" data-tweet-limit="2">Tweets by brooklynfest</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p> </a> </div> </div> </div>
使用col-md-6代替col
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="jumbotron1 jumbotron-fluid" id="register"> <div class="container1"> <h1 class="display-4">Register your interest!</h1> <p class="lead">Festival days will be free, but seats will be limited, so register your interest early and don't miss out!</p> <form> <div class="form-group"> <div class="row"> <div class="col"> <label for="firstname">First name</label> <input type="text" class="form-control" id="firstname" placeholder="Enter first name"> </div> <div class="col"> <label for="lastname">Last name</label> <input type="text" class="form-control" id="lastname" placeholder="Enter last name"> </div> </div> <br> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <h4>Which days are you interested in?</h4> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">August 5th</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">August 6th</label> </div> <br> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> <label class="form-check-label" for="inlineCheckbox3">August 7th</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> <label class="form-check-label" for="inlineCheckbox3">August 8th</label> </div> <br> <br> <div> <button type="submit" class="btn btn-primary">Submit</button></div> </form> </div> </div> </div> <div class="col-md-6"> <div class="jumbotron2" id="latestNews"> <h1 class="display-4">Latest News</h1> <div class="list-group"> </div> <p class="mb-1"><a class="twitter-timeline" href="https://twitter.com/brooklynfest?ref_src=twsrc%5Etfw" data-tweet-limit="2">Tweets by brooklynfest</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> </div> </div> </div>
我有同樣的問題；
當您僅使用時，列將共享您給他們的位置。 您也可以給它們一個權重，在bootstrap4中，整行有12個colm。 當您說一個col-4和另一個col-8時，他們會像1/3和2/3一樣共享屏幕。
現在，您還可以給它們一個尺寸，以防止它們折斷線。 它們定義了小管的最小寬度。 像col-sm / md / lg / xl（-1/2/3/4/5/6/7/8/9），例如col-md-4。
留在這里：
我認為md應該適合您。 因此，請使用col-md定義您的列：div class =“ col- md ”
當屏幕尺寸較小時，Bootstrap4 行和列不會相互堆疊
[英]Bootstrap4 row and col not stacking up each other when the screen size is small
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.