html - bootstrap 图片重叠

标签 html css twitter-bootstrap

我对 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/

相关文章:

java - Corona SDK 中的 Storyboard ScrollView

html - 标题标签的内容显示不同

javascript - 在 Bootstrap 中向下拉菜单添加开放类的问题

html - 元素在浏览器调整大小时移出位置,没有任何帮助

html - 如何让两个街区更近

javascript - 将 bootstrap-growl 警报左下角对齐

javascript - Bootstrap 4 文件输入

python - 使用 urllib2 登录网站 - Python 2.7

javascript - 如何在 jQuery 中获取屏幕上可见的元素对象?

html - Chrome 图像无法呈现