試圖讓桌子和麪板在html中對齊

Question

我想在屏幕的右側獲得四個panels，其左側是table。我的問題是，當table不是「長」足夠的panels移動table而不是停留在左側。我正在使用引導主題。

<div class="row"> 
    <!-- Start Of Projects Table --> 
    <div class="col-lg-8 pull-right"> 
     <!--table--> 
    </div> 
    <!-- End of projects table --> 
    <div class="col-lg-4 pull-left settings"> 
     <!--Panel Code --> 
    </div> 
    <div class="col-lg-4 pull-left settings"> 
     <!--Panel Code --> 
    </div> 
    <div class="col-lg-4 pull-left settings"> 
     <!--Panel Code--> 
    </div> 
    <div class="col-lg-4 pull-left settings"> 
     <!--Panel Code--> 
    </div> 
</div> 

Answer 1

這是因爲您應該使用div元素中的表格，對於4個面板您應該使用另一個「行」。

<div class="row"> 
    <div class="col-lg-8 pull-right"> 
    <!-- Start Of Projects Table --> 
    <!--table--> 
    <!-- End of projects table --> 
    </div> 
    <div class="col-lg-4 pull-left settings"> 
    <div class="row"> 
     <div class="col-lg-12 pull-left settings"> 
     <!--Panel Code --> 
     </div> 
     <div class="col-lg-12 pull-left settings"> 
     <!--Panel Code --> 
     </div> 
     <div class="col-lg-12 pull-left settings"> 
     <!--Panel Code--> 
     </div> 
     <div class="col-lg-12 pull-left settings"> 
     <!--Panel Code--> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

你應該讓父母在那裏。就像這樣：

<div class="row"> 
    <div style="float:left; width:50%;"> 
    <div class="col-lg-8 pull-right"> 
     <!--table--> 
    </div> 
    </div> 
    <div style="float:right; width:50%;"> 
    <div class="col-lg-4 pull-left settings"> 
     <!--Panel Code --> 
    </div> 
    <div class="col-lg-4 pull-left settings"> 
     <!--Panel Code --> 
    </div> 
    <div class="col-lg-4 pull-left settings"> 
     <!--Panel Code--> 
    </div> 
    <div class="col-lg-4 pull-left settings"> 
     <!--Panel Code--> 
    </div> 
    </div> 
</div><!--End of Row--> 

Bootstrap確實有一個類。如果我記得是class="col"這種方式，您可以在該行內創建列，並且可以完全響應。檢查這個基本的tamplates。它會幫助你更多地理解。 http://getbootstrap.com/getting-started/#template