我的问题是：我在另一个下面有一个Bootstrap Featurette。两者都有一个图像，并且都有一个标题和一个段落（如你所见here）。我的问题是较低的Featurette上的文字没有与较高的featurette上的图像水平排列，我似乎无法解决它或找到如何解决它的说明，所以我来这里寻求帮助。
<!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>Example Shop</title>
<link rel="icon" type="image/png" href="images/media-shuffle.png" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <!-- FontAwesome Integration -->
<link rel="stylesheet" href="bootstrap/css/animate.min.css" type="text/css">
<script src="https://cdn.ampproject.org/v0.js" async></script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
</head>
<style type="text/css">
@font-face {
font-family: 'msemibold';
font-style: normal;
font-weight: normal;
src: url('fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}
@font-face {
font-family: 'mpro';
font-style: normal;
font-weight: normal;
src: url('fonts/MYRIADPRO-REGULAR.woff') format('woff');
}
@font-face {
font-family: 'bebas';
src: url('fonts/bebas/BebasNeueRegular.otf');
}
@font-face {
font-family: 'bebasbold';
src: url('fonts/bebas/BebasNeueBold.otf');
}
@font-face {
font-family: 'sspro';
src: url('fonts/source-sans-pro/SourceSansPro-Regular.otf');
}
@font-face {
font-family: 'ssprobold';
src: url('fonts/source-sans-pro/SourceSansPro-Bold.otf') format('opentype'), url('fonts/source-sans-pro/SourceSansPro-Bold.ttf') format('truetype');
}
.jumbotron {
background-image: url('images/background.png');
margin-top: 0;
font-family: 'bebasbold';
color: black;
margin-bottom: 5%;
}
.firstheader {
text-align: left;
}
a {
text-decoration: none;
color: #585c65;
}
a:hover {
text-decoration: none;
color: black;
}
body {
background-image: url('images/dark-background.png');
}
.textbody {
color: white;
font-family: arial;
padding-left: 1%;
}
.gamer {
color: white;
font-family: 'bebasbold';
border-color: #585c65;
}
.stream {
color: white;
font-family: 'bebasbold';
}
.featurette-divider {
border-color: #585c65;
margin: 80px;
}
.lead {
font-family: 'mpro';
}
@media (min-width: 992px) {
.container-fluid {
overflow-x: hidden;
white-space: nowrap;
font-family: 'bebasbold';
}
}
</style>
<body>
<div class="jumbotron container-fluid navbar-fixed-top">
<div class="container">
<h1 class="firstheader">The Digital Card Shop <small>. <a href="#">About Us</a> | . <a href="#">Contact Us</a> | . <a href="#">Sell Your Account</a></small></h1>
</div>
</div>
<br></br><br></br><br></br><br></br><br></br><br></br><br></br>
<div class="container-fluid">
<container class="gamer">
<div class="row featurette">
<div class="col-sm-7 col-sm-push-6">
<h2 class="featurette-heading">Star Wars Card Trader <span class="text-muted">We Buy & Sell Cards.</span></h2>
<p class="lead">Star Wars is awesome. For that reason, <br> it remains one of the most popular subjects for trading cards;<br> Both physically and digitally.
</div>
<div class="col-md-5 col-md-pull-7">
<img class="featurette-image img-responsive center-block" src="images/swct.jpeg" height="200px" width="200px" alt="Generic placeholder image">
</div>
</div>
</container>
<hr class="featurette-divider">
<div class="container-fluid">
<container class="gamer">
<div class="row featurette">
<div class="col-sm-7 col-sm-push-2">
<h2 class="featurette-heading">Topps KICK 16 <span class="text-muted">We Buy & Sell Cards.</span></h2>
<p1 class="lead">Football (It isn't called soccer) is awesome. For that reason, <br> It remains one of the most popular subjects for trading cards;<br> Both physically and digitally. (Please add Derby County cards Topps)
</div>
<div class="col-md-5 col-md-pull-1">
<img class="featurette-image img-responsive center-block" src="images/kick.png" height="200px" width="200px" alt="Generic placeholder image">
</div>
</div>
<br></br><br></br><br>
</container>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</html>
由于
答案 0 :(得分：0)
所以这就是你的代码应该看起来https://jsfiddle.net/2Lzo9vfc/36/
的方式<强> HTML
<div class="container">
<div class="row">
<div class="col-sm-5">
<img class="featurette-image img-responsive center-block" src="http://placehold.it/200x200" height="200px" width="200px" alt="Generic placeholder image">
</div>
<div class="col-sm-7">
<h2 class="featurette-heading">Topps KICK 16 <span class="text-muted">We Buy & Sell Cards.</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolorem totam aliquam dolores amet repellendus aperiam, eligendi illum voluptatem vero.</p>
</div>
</div>
<hr class="featurette-divider">
<div class="row">
<div class="col-sm-7">
<h2 class="featurette-heading">Topps KICK 16 <span class="text-muted">We Buy & Sell Cards.</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolorem totam aliquam dolores amet repellendus aperiam, eligendi illum voluptatem vero.</p>
</div>
<div class="col-sm-5">
<img class="featurette-image img-responsive center-block" src="http://placehold.it/200x200" height="200px" width="200px" alt="Generic placeholder image">
</div>
</div>
</div>