Css 如何使图像在设备为中型设备时连续显示2个，在小型设备上显示1个
我有6张图片，我想让它们在调整屏幕大小时反应灵敏。 在中型设备上，2个图像必须显示在一行中，在小型设备上，1个图像，我也不知道如何使标题文本响应，当调整大小时，它应该变小，我使用max with作为.overlay标题 这是我的密码： 更新：Css 如何使图像在设备为中型设备时连续显示2个，在小型设备上显示1个,css,twitter-bootstrap,Css,Twitter Bootstrap,我有6张图片，我想让它们在调整屏幕大小时反应灵敏。 在中型设备上，2个图像必须显示在一行中，在小型设备上，1个图像，我也不知道如何使标题文本响应，当调整大小时，它应该变小，我使用max with作为.overlay标题 这是我的密码： 更新： <div class="container"> <div class="row"> <div class="image-container"> <div class="im
<div class="container">
<div class="row">
<div class="image-container">
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
</div>
</div>
</div>
.image-container {
margin-top: 50px;
text-align: center;
}
.image-portfolio {
margin:2px;
height: 250px;
width: 30%;
overflow: hidden;
}
.img-block img {
height: 250px;
max-width: 100%;
float: left;
transition: all 0.5s;
}
.overlay-header {
position: absolute;
max-width: 225px;
height: 55px;
background: rgba(202,205,206,.7);
margin-top: 50px;
}
.overlay-header h1 {
line-height: 20px;
}
.text-overlay {
position: relative;
text-align: center;
font-size: 16px;
line-height: 22px;
bottom: 120px;
color: white;
visibility: hidden;
}
.image-portfolio:hover .img-block img {
cursor:pointer;
transform: scale(1.3);
}
.image-portfolio:hover {
cursor:pointer;
}
.image-portfolio:hover .text-overlay {
visibility: visible;
}
.image-portfolio:hover .img-block img {
filter: brightness(40%);
}
<div class="container">
<div class="row">
<div class="image-container">
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
</div>
</div>
</div>
.image-container {
margin-top: 50px;
text-align: center;
}
.image-portfolio {
margin:2px;
height: 250px;
width: 30%;
overflow: hidden;
}
.img-block img {
height: 250px;
max-width: 100%;
float: left;
transition: all 0.5s;
}
.overlay-header {
position: absolute;
max-width: 225px;
height: 55px;
background: rgba(202,205,206,.7);
margin-top: 50px;
}
.overlay-header h1 {
line-height: 20px;
}
.text-overlay {
position: relative;
text-align: center;
font-size: 16px;
line-height: 22px;
bottom: 120px;
color: white;
visibility: hidden;
}
.image-portfolio:hover .img-block img {
cursor:pointer;
transform: scale(1.3);
}
.image-portfolio:hover {
cursor:pointer;
}
.image-portfolio:hover .text-overlay {
visibility: visible;
}
.image-portfolio:hover .img-block img {
filter: brightness(40%);
}
由于您希望在介质设备上一行仅显示2个图像，因此应使用col-md-6类。这意味着介质设备上的12列中，一个图像将显示6列 然后在小型设备上一行只需要一个图像，应该使用col-sm-12类这意味着在小型设备上的12列中，一个图像将占据所有12列 col-lg-3表示在较大的设备上，4个图像将显示在一行中
<div class="image-portfolio col-lg-3 col-md-6 col-sm-12">
类似上面的内容这似乎没有帮助，我更新了链接。我在css中遇到了一个我无法理解的问题out@Andrew首先清除自定义样式表，然后重试
@media(max-width:768px){
h1{
font-size:20px;
}
}