请在此处查看页面和代码：http://deadlydesigns.com/bootstrap/
您好，我是Bootstrap的新手。我一直在将Bootstrap实现为静态HTML页面，似乎无法弄清楚如何在右侧正确对齐购物车，流行艺术家和流行类型。其他一些人帮我把艺术描述排成一行;但是，它需要与艺术品标题对齐。在这样做时，还需要在艺术标题和右侧面板之间留出空间。 Here is how it needs to look
此外，我在顶部的搜索按钮没有与搜索文本输入字段对齐。我不知道为什么。它正在排队，然后一些东西搞砸了，我无法弄清楚它是什么。
谢谢！麦克
答案 0 :(得分：0)
将第一个col-md-10元素（<h2>和<p>元素）的内容移至第二个col-md-10的顶部（col-md-5之前，等内容）。然后，您可以删除第一个col-md-10元素。之后，您可以合并div.row个元素，所有内容都应该按照您的意愿排列：
div.container
<div class="container">
<div class="row"> <!-- row 1 -->
<div class="col-md-10">
<h2>Self-portrait in a Straw Hat</h2><p>By <a href="#">Louise Elisabeth Lebrun</a></p><div class="col-md-5">
<img src="images/art/113010.jpg" class="img-thumbnail img-responsive" alt="Self-portrait in a Straw Hat">
</div> <!-- col-md-5 -->
<div class="col-md-7">
<p>
The painting appears, after cleaning, to be an autograph replica of a picture, the original of which was painted in Brussels in 1782 in free imitation of Rubens's 'Chapeau de Paille', which LeBrun had seen in Antwerp. It was exhibited in Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.
</p>
<p class="price">$700</p>
<div class="btn-group">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-gift"></span>
Add to Wish List
</button>
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-shopping-cart"></span>
Add to Shopping Cart
</button>
</div> <!-- end btn-group -->
<p> </p>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tbody><tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimensions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td><a href="#">National Gallery, London</a></td>
</tr>
<tr>
<th>Genres:</th>
<td><a href="#">Realism</a>, <a href="#">Rococo</a></td>
</tr>
<tr>
<th>Subjects:</th>
<td><a href="#">People</a>, <a href="#">Arts</a></td>
</tr>
</tbody></table>
</div> <!-- end panel panel-default -->
<p> </p>
</div><!-- end col-md-7 -->
<div class="col-md-12">
<h3>Similar Products </h3>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/116010.jpg" alt="...">
<div class="caption">
<p class="similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<button class="btn btn-primary btn-xs" type="button"><span class="glyphicon glyphicon-record"></span> View</button>
<button class="btn btn-success btn-xs" type="button"><span class="glyphicon glyphicon-gift"></span> Wish</button>
<button class="btn btn-info btn-xs" type="button"><span class="glyphicon glyphicon-shopping-cart"></span> Cart</button>
</div>
</div>
</div> <!-- col-md-3 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/120010.jpg" alt="...">
<div class="caption">
<p class="similarTitle"><a href="#">Portrait of Eleanor of Toledo</a></p>
<button class="btn btn-primary btn-xs" type="button"><span class="glyphicon glyphicon-record"></span> View</button>
<button class="btn btn-success btn-xs" type="button"><span class="glyphicon glyphicon-gift"></span> Wish</button>
<button class="btn btn-info btn-xs" type="button"><span class="glyphicon glyphicon-shopping-cart"></span> Cart</button>
</div>
</div>
</div> <!-- col-md-3 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/107010.jpg" alt="...">
<div class="caption">
<p class="similarTitle"><a href="#">Madame de Pompadour</a></p>
<button class="btn btn-primary btn-xs" type="button"><span class="glyphicon glyphicon-record"></span> View</button>
<button class="btn btn-success btn-xs" type="button"><span class="glyphicon glyphicon-gift"></span> Wish</button>
<button class="btn btn-info btn-xs" type="button"><span class="glyphicon glyphicon-shopping-cart"></span> Cart</button>
</div>
</div>
</div> <!-- col-md-3 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/106020.jpg" alt="...">
<div class="caption">
<p class="similarTitle"><a href="#">Girl with a Pearl Earring</a></p>
<button class="btn btn-primary btn-xs" type="button"><span class="glyphicon glyphicon-record"></span> View</button>
<button class="btn btn-success btn-xs" type="button"><span class="glyphicon glyphicon-gift"></span> Wish</button>
<button class="btn btn-info btn-xs" type="button"><span class="glyphicon glyphicon-shopping-cart"></span> Cart</button>
</div>
</div>
</div> <!-- col-md-3 -->
</div></div><div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart </h3>
</div> <!-- end panel-heading -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="images/art/tiny/116010.jpg" alt="..." width="32">
</a>
<p class="media-body"><a class="media-heading" href="#">Artist Holding a Thistle</a></p>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="images/art/tiny/113010.jpg" alt="..." width="32">
</a>
<p class="media-body"><a class="media-heading" href="#">Self-portrait in a Straw Hat</a></p>
<strong class="cartText">Subtotal: <span class="cartTotal">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-record"></span> Edit</button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right"></span> Checkout</button>
</div> <!-- end buttons -->
</div> <!-- end media -->
</div> <!-- end panel panel-primary -->
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div> <!-- panel-heading -->
<ul class="list-group">
<li class="list-group-item"><a href="#">Caravaggio</a></li>
<li class="list-group-item"><a href="#">Cezanne</a></li>
<li class="list-group-item"><a href="#">Matisse</a></li>
<li class="list-group-item"><a href="#">Michelangelo</a></li>
<li class="list-group-item"><a href="#">Picasso</a></li>
<li class="list-group-item"><a href="#">Raphael</a></li>
<li class="list-group-item"><a href="#">Van Gogh</a></li>
</ul>
</div> <!-- panel panel-info -->
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div> <!-- panel-heading -->
<ul class="list-group">
<li class="list-group-item"><a href="#">Baroque</a></li>
<li class="list-group-item"><a href="#">Cubism</a></li>
<li class="list-group-item"><a href="#">Impressionism</a></li>
<li class="list-group-item"><a href="#">Renaissance</a></li>
</ul>
</div> <!-- panel panel-info -->
</div><!-- col-md-10 -->
<!-- 2st row -->
</div> <!-- 1st row -->