所以我目前正在使用Bootstrap 3开发一个网页，我的左侧有两列图像旋转，当我在15英寸笔记本电脑上全屏打开时，它看起来都很好然而，当我开始调整窗口大小时，列和旋转木马开始重叠。当旋转木马与窗口一起调整大小时，左侧的按钮不会改变尺寸并简单地占用画布。有没有办法让这些按钮动态改变大小，以便整个窗口看起来像全屏一样？
以下是全屏网站：https://imgur.com/a/iU0uw
以下是尺寸较小的网站：https://imgur.com/a/RcjPg
此处是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>BookSwap Browse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.carousel-inner img {
margin: auto;
min-height:200px;
}
.carousel {
width: 100%;
}
/* Hide the carousel text when the screen is less than 600 pixels wide */
@media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-sm-1">
<div class="btn-group-vertical" data-toggle="buttons">
<h3>Filter Choices</h3>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Fantasy
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Science Fiction
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Fiction
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Young Adult
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Nonfiction
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Horror
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Satire
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Mystery
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Romance
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Cookbooks
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Self-Help
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Religion & Spirituality
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Poetry
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Biography
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Historical Fiction
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Guide
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Comics
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Comedy
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Fan Fiction lol
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> Manga
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> idk what
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> other genres
</label>
<label class="btn btn-info">
<input type="checkbox" checked autocomplete="off"> are there
</label>
</div>
</div>
<div class="col-sm-1 btn-group-vertical">
<h3>Owner Info</h3>
<img src="https://i.imgur.com/kDvRIjR.png" style="width:100%" alt="Image">
<label class="btn btn-primary">
Daho Inoraha
</label>
<p> Location: <br> UMass Amherst</p>
<a href="https://www.google.com/maps/place/University+of+Massachusetts+Amherst/@42.3911569,-72.5289008,17z/data=!3m1!4b1!4m5!3m4!1s0x89e6d273e4f0f865:0xa0d6586089148e05!8m2!3d42.3911569!4d-72.5267121" title=""><img src="https://i.imgur.com/KokzlKU.png" class="img-responsive"> Google Maps</a>
<br> <br> <br> <br> <br> <br> <br> <br>
<h4>Other Owners</h4>
<label class="btn btn-primary">
Jacob James
</label>
<label class="btn btn-primary">
John Jeremies
</label>
<label class="btn btn-primary">
Jack Jones
</label>
<label class="btn btn-primary">
Jeff Jefferson
</label>
<label class="btn btn-primary">
Jedediah Jet
</label>
<label class="btn btn-primary">
Bob
</label>
</div>
<div class="col-sm-10">
<div class = "container-fluid">
<h3> Browse Books!</h3>
<div id="myCarousel" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://i.imgur.com/Itlu1v5.jpg" style="width:35%" alt="Image">
<div class="carousel-caption">
<h3><a href="https://i.imgur.com/Itlu1v5.jpg"> Marriage, a History</a></h3>
<p>Stephanie Coontz</p>
<p>(The above link will lead to a page with more info on the book and what the owner is looking for) </p>
</div>
</div>
<div class="item">
<img src="https://i.imgur.com/1D9rPU4.jpg" style="width:35%" alt="Image">
<div class="carousel-caption">
<h3><a href="https://i.imgur.com/1D9rPU4.jpg"> The Complete Vegetarian Cookbook </a></h3>
<p>America's Test Kitchen</p>
<p> </p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>WEB Dev Boys Mock UI 2018</p>
</footer>
</body>
</html>
我已经尝试搞乱列或使用@media，以便在屏幕太小但没有显示我的问题时按钮不显示。我对bootstrap，css和html很新，所以我不知道从哪里开始解决这里的问题。我认为问题来自于我将其设置到各自列中的方式，但这是我设法将所有内容放在正确位置的唯一方法（至少在全屏幕中）。
答案 0 :(得分：0)
检查
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}