我使用自动布局列并排放置了两个巨无霸，分别位于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>CodePen
关于html - 减小屏幕尺寸时，将一个超大加速器堆叠在一起，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54639564/