【发布时间】：2018-09-28 17:15:43
【问题描述】：
我正在尝试使用引导程序创建响应式网页。在小视图（xs 和 sm）中，页面工作正常。我为较小的视图隐藏了一些图像，它具有非常标准的布局。
当我增加屏幕尺寸时问题就开始了。在大视图（> = md）中，我尝试将四个图像按列堆叠成一行。无论我做什么，第四张图片总是进入下一行。
我尝试将边距、填充和边框设置为零，但仍然没有成功。我在代码笔中附加了我的问题的链接。实际的 html 文件和 css 稍大一些，所以我缩小了范围，只显示有问题的部分。请忽略我的代码中任何未使用的类或 ID。谢谢
https://codepen.io/maheenul/pen/mLdmvy?editors=1100
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Design Lab</title>
<link rel="stylesheet" type="text/css" href="css/responsive.css"/>
<meta charset = "UTF-8">
<!-- Latest compiled and minified CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<section id = "center">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Images not confined within the row</h2>
<div class="myClass">
<h3> Loren Ipsum</h3>
</div>
</div>
</div>
<div class="row d-none d-md-block">
<img class="col-md-3" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" alt="Football">
<img class="col-md-3" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTO8WIJ5ygVENopHPC5Op9z4ua-MoGD-LoUZuEd6vdL-EMro28CWw" alt="Solar Car">
<img class="col-md-3" src="http://www-personal.umich.edu/~jensenl/visuals/album/annarbor/IMG_1051.jpg" alt="campus">
<img class="col-md-3" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" alt="Football">
</div>
</div>
</section>
<footer>
<p>The images above don't stack .<br/> Responsive Design</p>
</footer>
</body>
</html>
CSS：
body{
margin: 1%;
padding:1%;
background-color: rgba(0,0,255,.2) !important;
font-size: 100%;
min-width: 500px;
}
header, footer{
background-color:#0066FF;
padding: 1%;
margin: 1%;
}
header h1{
font-size: 3rem;
color:rgba(0,0,0,.7);;
}
section{
margin:0%;
padding:0%;
}
.myClass{
margin: 0em 1em;
padding:.75em;
border: 1px solid black;
border-radius: .25%;
}
footer{
clear: both;
text-align:center;
text-transform: uppercase;
}
@media screen and (min-width: 768px){
header, footer{
background-color:transparent;
}
img{
display: inline-block;
margin: 0;
padding: 0;
border:0;
overflow: auto;
}
}
【问题讨论】：
-
最简单的解决方法是将图像包装在
<div class="col-md-3">...</div>中，而不是将类直接应用于图像。 -
试过但让事情变得更糟。图像溢出 div 并堆叠在一起。感谢您的意见:)
标签： html css twitter-bootstrap responsive-design bootstrap-4