我对 Html 和 Css 还很陌生。我正在尝试制作一个投资组合网站作为我自己的练习。但是,当我尝试将多张图片并排放置时,有点像画廊。我的照片开始相互重叠。我已经尝试了几个小时来寻找解决方案。但似乎没有任何效果。
你们中的任何人有可能导致解决方案的建议吗? 提前致谢!!] 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width", initial-scale=1.0>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="styles/styles.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<title>Noah Wallaart</title>
</head>
<body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="header">
<div class="navbar navbar-default">
<div class="container">
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Noah Wallaart</h1>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
<section>
<div class="container">
<div class="row">
<div class="col-md-"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
</div>
</div>
</section>
</body>
</html>
最佳答案
试试这个:
<style>
.col-md-3{
margin: 10px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
</div>
</div>
关于html - bootstrap 图片重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35140792/