我正在尝试使用 bootstrap 创建响应式网页。在小 View (xs 和 sm)中，页面工作正常。我为较小的 View 隐藏了一些图像，它有一个非常标准的布局。
当我增加屏幕尺寸时，问题就出现了。在大 View (>=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;
}
}
最佳答案
添加字体大小:0；在
上。
图像之间的空间正在占用空间，这就是为什么它不适合 1 行。
关于html - 在 bootstrap 4.0 的一行中，图像不是按列堆叠的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49900105/