我正在尝试将我的列向右移动，直到找到合适的位置。当我使用填充将其向右移动时，它会将我的图片压缩在一起。我还想使用col-md-4将我的照片拉得更近。我搜索了一个答案，但没有找到与我的问题相关的任何内容。我还是新手，任何帮助都会很棒。
header {
min-height: 110px;
background-color: darkorange;
border: 1px solid burlywood;
border-bottom: 1px solid black;
}
header h1 {
margin: 15px;
text-align: center;
font-family: 'Indie Flower', cursive;
}
.img {
padding-top: 10px;
}
.thumbnail {
width: 275px;
height: 225px;
}
.img_pad {
margin-left: 15%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Take 5 Forms</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Spirax" rel="stylesheet">
<title>Painting website</title>
<style>
</style>
</head>
<body>
<header id="header">
<h1><strong>Guide to Interior House Painting:<br>
A guide to getting your painting projects done efficiently and quickly!</strong></h1>
</header>
<div class="container">
<div class="row img_pad">
<div class="col-md-4 img">
<a href="#" class="thumbnail">
<img src="paint_brush3" style="border: 1px solid black; height:215px; width:260px;" alt="No Picture Found">
</a>
<p>Click on the image above for a list of links that will get you ideas on some colors.</p>
</div>
<div class="col-md-4 img">
<a href="#" class="thumbnail">
<img src="/images/drop_cloth.jpg" alt="125x125" style="height:215px;" alt="No Picture Found">
</a>
<p>Click on this picture for some instructions on how to paint your room.</p>
</div>
<div class="col-md-4 img">
<a href="#" class="thumbnail">
<img src="/images/paint_brush.jpg" style="height:215px;" alt="No Picture Found">
</a>
<p>Click on this picture for a list of items you will need for interior painting.</p>
</div>
</div>
</div>
</body>
答案 0 :(得分：2)
更新2：，
我已经更新了小提琴。
Check this它有很好的引导模板，可以让你的生活变得轻松。
更新1：，
这是你要的吗？
我为小屏幕和超小屏幕添加了课程col-sm-6 col-xs-6
参考：https://v4-alpha.getbootstrap.com/layout/grid/
header {
min-height: 110px;
background-color: darkorange;
border: 1px solid burlywood;
border-bottom: 1px solid black;
}
header h1 {
margin: 15px;
text-align: center;
font-family: 'Indie Flower', cursive;
}
.img {
width: 100%;
padding-top: 10px;
}
.thumbnail {
width: 100%;
height: 225px;
}
.img_pad {
margin-left: 15%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Take 5 Forms</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Spirax" rel="stylesheet">
<title>Painting website</title>
<style>
</style>
</head>
<body>
<header id="header">
<h1><strong>Guide to Interior House Painting:<br>
A guide to getting your painting projects done efficiently and quickly!</strong></h1>
</header>
<div class="container">
<div class="row img_pad">
<div class="col-sm-3 col-md-3 col-xs-3">
<h3>What is Lorem Ipsum?</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</div>
<div class="col-sm-9 col-md-9 col-xs-9">
<div class="col-md-4 col-sm-6 col-xs-6 img">
<a href="#" class="thumbnail">
<img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png" style="border: 1px solid black; height:215px; width:260px;" alt="No Picture Found">
</a>
<p>Click on the image above for a list of links that will get you ideas on some colors.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 img">
<a href="#" class="thumbnail">
<img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png" alt="125x125" style="height:215px;" alt="No Picture Found">
</a>
<p>Click on this picture for some instructions on how to paint your room.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 img">
<a href="#" class="thumbnail">
<img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png" style="height:215px;" alt="No Picture Found">
</a>
<p>Click on this picture for a list of items you will need for interior painting.</p>
</div>
</div>
</div>
</div>
</body>