我有这个网站：www.indiespil.dk
包括文字在内的小图片在任何一台计算机上都有所体现，但最底层的图片在智能手机和平板电脑上都很糟糕 - 即使在三星智能电视上也是如此。
你可以帮我解决这个问题吗？
代码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>IndieSpil.dk</title>
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- Favicon -->
<link rel="icon" type="image/png" href="images/favicon.png">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
<body>
<section id="home-page">
<div class="container-fluid home-bg">
<div class="row">
<div class="col-md-12 text-center home-page">
<div class="main-logo">
<img src="images/logo.png" alt="" /></a>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="about-title">LAUNCHING IN</h1>
</div>
<div class="container">
<!-- COUNTDOWN -->
<div class="row">
<div class="col-sm-12 tk-countdown">
<div class="row">
</div>
</div>
</div>
<!-- /COUNTDOWN -->
<div class="col-sm-12 social-shear text-center">
<a href="https://www.facebook.com/indiespil"><i class="fa fa-facebook"></i></a>
<a href="https://www.twitter.com/indiespil"><i class="fa fa-twitter"></i></a>
<a href="https://plus.google.com/+IndiespilDk1/posts"><i class="fa fa-google-plus"></i></a>
</div><!-- /.social-shear -->
</div>
</div>
</div>
</section><!-- /#home-page -->
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section><!-- /#about-page -->
<section id="about-page">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="about-title">A Danish indie game store</h1>
<h2>For Danish Indie Gamers</h2>
<p>Cool features include</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-trophy"></i>
<h3 class="whiteTextOverride">Competitions</h3>
<p>Every week we'll have a featured game on sale. Be the fastest on the chosen level and win great prizes.</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-gamepad"></i>
<h3 class="whiteTextOverride">Game wallet</h3>
<p>One place for all your games. Simple.</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-circle-o"></i>
<h3 class="whiteTextOverride">Indie Coins</h3>
<p>Buy a game and get rewarded with Indie Coins. Spend your coins on new games. You can also find our easter eggs and get rewarded...</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-users"></i>
<h3 class="whiteTextOverride">Community</h3>
<p>We'll gather all Danish indie gamers in our cozy environment.</p>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section><!-- /#service-page -->
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section><!-- /#about-page -->
<section id="service-page">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="service-title">Features</h1>
<h2>For developers</h2>
<p>Our goal is to remove every obstacle for you, making it easy to be a part of IndieSpil.dk</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-upload"></i>
<h3>Easy updates</h3>
<p>No need for you to spend time on updating your game - Send us a link, and we'll do the rest.</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-youtube-play"></i>
<h3>Reviews</h3>
<p>We make a video game review in Danish of every game on our store.</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-bar-chart-o"></i>
<h3>Sales stats</h3>
<p>Don't worry about finding and analyzing sales stats - We will report to you directly on the 1st of each month.</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-rocket"></i>
<h3>Marketing</h3>
<p>We will take care of marketing your game in Denmark - we will reach above 100.000 Danish gamers in an instant.</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-usd"></i>
<h3>Our budget</h3>
<p>Over 90% of our profit goes back to marketing your game</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-file-text-o"></i>
<h3>Contract</h3>
<p>Our contract is written for people, easy to understand, short and without anything hidden. Yet it's still written by a great lawyer.</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-check-square-o"></i>
<h3>Quality Assurance</h3>
<p>We only accept great games on our website. IndieSpil.dk will not be watered down by bad games. Make sure you fit in!</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-users"></i>
<h3>Our Community</h3>
<p>We will take care of our community's response to your game, you wont have to spend time reading comments or replying.</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-flag"></i>
<h3>Localizing</h3>
<p>In Denmark people prefer to play games in English. No need to change language, just because we're a Danish store.</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-comment-o"></i>
<h3>Translation</h3>
<p>We will take care of translating descriptions, tags and meta.</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-google"></i>
<h3>SEO & Adwords</h3>
<p>We have a SEO expert making SEO for our website, resulting in rank 1 on google. We spend a large amount of our profits on Adwords.</p>
</div>
<div class="col-md-3 col-sm-6 text-center service">
<i class="fa fa-thumbs-o-up"></i>
<h3>Exposure</h3>
<p>Talk to us, and we might feature your game on the front page.</p>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section><!-- /#service-page -->
<section id="about-page">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="about-title">About Us</h1>
<h2>The team</h2>
<p>We're a team of three Danish young entrepreneurs</p>
</div>
<div class="col-md-4 text-center member">
<div class="member-img">
<img src="images/01.jpg" alt="" />
<div class="member-social">
<a class="facebook-icon" href="https://www.facebook.com/michael.himmelstrup?fref=ts"><i class="fa fa-facebook"></i></a>
<a class="twitter-icon" href="https://dk.linkedin.com/in/michaelhimmelstrup"><i class="fa fa-linkedin"></i></a>
</div>
</div>
<h3>Michael Himmelstrup</h3>
<span>Graphics Designer</span>
</div>
<div class="col-md-4 text-center member">
<div class="member-img">
<img src="images/02.jpg" alt="" />
<div class="member-social">
<a class="facebook-icon" href="https://www.facebook.com/profile.php?id=100002489468218"><i class="fa fa-facebook"></i></a>
<a class="twitter-icon" href="https://dk.linkedin.com/pub/emil-kristensen/a5/3a3/b83"><i class="fa fa-linkedin"></i></a>
</div>
</div>
<h3>Emil Frølund</h3>
<span>Founder</span>
</div>
<div class="col-md-4 text-center member">
<div class="member-img">
<img src="images/03.jpg" alt="" />
<div class="member-social">
<a class="facebook-icon" href="https://www.facebook.com/Magmismo?fref=ts"><i class="fa fa-facebook"></i></a>
<a class="twitter-icon" href="http://dk.linkedin.com/in/christianagerup"><i class="fa fa-linkedin"></i></a>
</div>
</div>
<h3>Christian Agerup</h3>
<span>Web Developer</span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section><!-- /#about-page -->
<section id="contact-page">
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="main-contact-form" class="contact-form-area text-center" name="contact-form" method="post" action="sendemail.php">
<h1 class="contact-title">Get in touch</h1>
<h2>Feel free to contact us</h2>
<p></p>
<div class="contact-form">
<div class="col-sm-5 your-name col-sm-offset-1">
<div class="form-group">
<input type="text" name="name" required="required" class="form-control" placeholder="Enter your name...">
</div>
</div>
<div class="col-sm-5 your-email">
<div class="form-group">
<input type="email" name="email" class="form-control" required="required" placeholder="Enter your email...">
</div>
</div>
<div class="col-sm-10 your-message col-sm-offset-1">
<div class="form-group">
<textarea name="message" id="message" required="required" class="form-control" rows="10" placeholder="Enter your message..."></textarea>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary btn-lg submit-button" >Submit</button>
</div>
</div>
</div>
</form>
</div>
</div><!--/.row-->
</div><!-- /.container -->
</section><!-- /#contact-page -->
<section id="about-page">
<div class="container">
<div class="row">
<div class="col-sm-12 social-shear text-center">
<a href="https://www.facebook.com/indiespil"><i class="fa fa-facebook"></i></a>
<a href="https://www.twitter.com/indiespil"><i class="fa fa-twitter"></i></a>
<a href="https://plus.google.com/+IndiespilDk1/posts"><i class="fa fa-google-plus"></i></a>
</div><!-- /.social-shear -->
</div>
</div>
</div>
</section><!-- /#home-page -->
<!-- JS -->
<script type="text/javascript" src="js/jquery.min.js"></script><!-- jQuery -->
<script type="text/javascript" src="js/bootstrap.min.js"></script><!-- Bootstrap -->
<script type="text/javascript" src="js/countdown.js"></script><!-- Countdown -->
<script type="text/javascript" src="js/scripts.js"></script><!-- Scripts -->
</body>
</html>
答案 0 :(得分：0)
错位是由于网格元素中的高度不一致（某些元素比其他元素更高并且将被向下推）。尝试将最小高度设置为网格元素。
尝试将此添加到“功能”部分：
.service {
margin-top: 10px;
min-height: 240px; // Highest element in your grid
}