在Dreamweaver CC 2015中学习如何使用Bootstrap创建响应式网站。 在Adobe的教程之后，我在页面中连续添加了4个Bootstrap Thumbnail元素。 问题在于大约991px，它们调整为4个大图像＆amp;填补空间。 我希望他们能够调整到＆＃34;双向＆amp;二向下＆＃34;在991px＆amp;能够快速响应手机大小，在屏幕上可以达到100％。 我是否使用媒体查询？ 我对此非常陌生，所以你耐心等待感谢投入。 提前谢谢。
这是指向页面的链接：http://buzzpunchmedia.com/bootstrap/index.html
从html开始第98行：
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail"><img src="images/thumbnail-1.jpg" alt="Thumbnail Image 1" class="image-fill">
<div class="caption">
<h3>C Ring</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"><img src="images/thumbnail-2.jpg" alt="Thumbnail Image 1" class="image-fill">
<div class="caption">
<h3>A Ring</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"><img src="images/thumbnail-3.jpg" alt="Thumbnail Image 1" class="image-fill">
<div class="caption">
<h3>S Ring</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"><img src="images/thumbnail-1.jpg"
alt="Thumbnail Image 1" class="image-fill">
<div class="caption">
<h3>C Ring 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p>
</div>
</div>
</div>
</div>
</div>
这是我的css：
@charset "UTF-8";
h1, h3, p {
text-align: center;
}
.navbar-brand.brand-logo {
display: none;
}
#main {
width: 75%;
max-width: 750px;
margin-left: auto;
margin-right: auto;
color: #CCCACA;
}
footer {
margin-top: 30px;
padding-top: 25px;
padding-bottom: 25px;
background-color: #020202;
color: #E5E5E5;
text-align: center;
height: 200px;
}
.navbar.navbar-default {
border-width: 0px;
border-radius: 0px;
background-color: #FFFFFF;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
font-size: 18px;
}
.image-fill {
width: 100%;
max-width: 0px;
min-height: 0px;
}
#wrapper {
padding-left: 0px;
padding-right: 0px;
}
.logobar {
background-color: #424242;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 20px;
color: #73A014;
text-align: right;
width: 100%;
padding-right: 20px;
}
.logobar-logo {
float: left;
position: absolute;
top: 0px;
z-index: 10;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
display: block;
}
.logoback {
background-color: #424242;
}
.bodymain {
background-color: #424242;
}
#carousel1 {
padding-top: 0px;
padding-bottom: 0px;
height: auto;
margin-top: 0px;
margin-bottom: 0px;
}
/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
.logobar-logo {
display: none;
}
.navbar-brand.brand-logo {
display: block;
}
.logobar {
text-align: center;
font-size: 18px;
}
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
.logobar-logo {
display: none;
}
.navbar-brand.brand-logo {
display: block;
}
}
答案 0 :(得分：1)
我认为这就是你想要的，基本上你所要做的就是为你的每一个添加多个引导类，例如.col-sm-6（对于小型设备）和.col-xs-12（对于最小的设备） thumbnails他们会占用您要求的所需尺寸。
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail"><img src="img/thumbnail-1.jpg" class="cool-bg" alt="Thumbnail Image 1" class="image-fill">
<div class="caption">
<h3>C Ring</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail"><img src="img/thumbnail-1.jpg" alt="Thumbnail Image 1" class="image-fill">
<div class="caption">
<h3>A Ring</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail"><img src="img/thumbnail-1.jpg" alt="Thumbnail Image 1" class="image-fill">
<div class="caption">
<h3>S Ring</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail"><img src="img/thumbnail-1.jpg" alt="Thumbnail Image 1" class="image-fill">
<div class="caption">
<h3>C Ring 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p>
</div>
</div>
</div>
</div>
</div>