我的代码尝试使图像响应并使其居中时出现了什么错误，但是，我似乎无法成功地做到这一点。我究竟做错了什么？它在我的屏幕上的外观示例。 http://imgur.com/a/bqrKw
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" target="_blank">
<img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="picture" class="img-responsive center-block" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
您需要添加 col-lg-12 以便在大型桌面上居中。
body .jumbotron {
background-color: #01BAEF;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="jumbotron text-center">
<h1>About Me</h1>
<p>Find out more about me!</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-12">
<div class="thumbnail">
<a href="/w3images/lights.jpg" target="_blank">
<img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="..." class="img-responsive" />
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="well">
<h3>Who am I?</h3>
<p>My name is Liam Docherty and I'm 17 years old, currently studying at Hackney Community College. In 2016 when I was taking my GCSE exams, I found my passion which was IT. My favourite topic within IT is software development. The reason how I
found out this was my main passion with IT is because, I was assigned a task which was to create a website advertising myself to potential employees and really enjoyed learning multiple programming languages.</p>
<p>Overall, I have multiple experience within a range of different sectors within IT. For example, I have knowledge of installing and maintaining hardware and software in a technology system. Moreover, I have experience using application software
such as Adobe Photoshop CS6, Adobe Premier Pro CS6 and Adobe Illustrator CS6.</p>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<h3>Skills I can offer</h3>
<p>Front-end Development</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Installing and maintaining hardware such as</p>
<ul>
<li>Upgrading RAM</li>
<li>Installing network card</li>
<li>Using air duster to reduce dust build up in fan component</li>
</ul>
<p>Installing and maintaining software such as </p>
<ul>
<li>Installing an operating system</li>
<li>Installing anti-virus application software</li>
<li>Doing a defragment on hard drive</li>
</ul>
<p>Experience using application software such as...</p>
<ul>
<li>Adobe Photoshop CS6</li>
<li>Adobe Premier Pro CS6</li>
<li>Adobe Illustrator CS6</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<h3>Future goals within IT</h3>
<ul>
<li>Improve my skills on using programming language javascript</li>
<li>Learn how to use Adobe After Effects to improve editing skills</li>
<li>Expand my knowledge on bootstrap</li>
</ul>
</div>
</div>
</div>
</div>关于css - 我的代码中有错误如何使响应图像居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43023770/