行和列引導程序，獨立列

我在應用程序中遇到Bootstrap問題。我會嘗試儘可能清楚：行和列引導程序，獨立列

我有2列，在第一個我有一個表在上半年和一個disqus評論系統在另一半。在第二欄中，我只是在上半場有另一張桌子。下半場是空白的。

這是一張

visualisation

我面對的其實是當我在disqus評論系統添加註釋的問題，第二列（與表2）正在下降，因爲disqus塊變得更長。

我想要的是讓disqus系統變長而不影響TABLE2的位置。我只是想讓我的TABLE2留在我的TABLE下，即使disqus塊很長。

下面的代碼：

.row-fluid 
    %h2= "Title ..." 
    .span5 
     %table 
     %thead 
      %tr 
      %th= "test" 
      %th= "test" 
      %th= "test" 
      %th= "test" 
      %th= "test" 
      %th= "test" 
     %tbody 
      = render @something 
    .span6 
    #disqus_thread 
    :javascript 
     var disqus_shortname = 'test'; 
     (function() { 
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; 
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
     })(); 

.row-fluid 
    %h2= "test" 
    .span5 
     %table.table.table-striped#myTable2.tablesorter 
     %thead 
      %tr 
      %th= "test" 
      %th= "test" 
      %th= "test" 
      %th= "test" 
      %th= "test" 
      %th= "test" 
     %tbody 
      = render @something

我希望我清楚。

來源

2013-08-01 user2462805

在第一列的後半部分添加'overflow：auto'。它會顯示滾動條，該部分的內容變得更長 –

它實際上不工作：/ – user2462805

你能顯示代碼嗎？ –

重新安排你的HTML結構如下：

<!-- Main Wrapper --> 
<div class='row-fluid'> 

    <!-- Table Structure Wrapper --> 
    <div class='span5'> 

     <h2>Table 1</h2> 
     <table> 

     </table> 

     <h2>Table 2</h2> 
     <table> 

     </table> 

    </div> 

    <!-- DISQUs Comments wrapper --> 
    <div class='span6'> 

    </div> 

</div>

您可以使用CSS來管理表和其他東西之間所需的間隔。

來源

2013-08-01 10:01:52

行和列引導程序，獨立列

回答

相關問題