使用 Bootstrap Grid 排列内容的问题

Question

在此处查看页面和代码：http://deadlydesigns.com/bootstrap/

您好，我是 Bootstrap 的新手。我一直在将 Bootstrap 实现到静态 HTML 页面，但似乎无法弄清楚如何在右侧正确对齐购物车、流行艺术家和流行流派。其他一些人帮助我将它与艺术描述对齐；但是，它需要与艺术品标题对齐。在这样做的同时，还需要在艺术标题和右侧面板之间留出空间。 Here is how it needs to look.

另外，我在顶部的搜索按钮没有与搜索文本输入字段对齐。我不确定为什么。它正在排队，然后有些东西搞砸了，我无法弄清楚它是什么。

谢谢！迈克

Answer 1

将第一个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>&nbsp;</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>&nbsp;</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 -->