0

我在我的应用程序中遇到了 Bootstrap 的问题。我会尽量说清楚：

我有 2 列，在第一个中，我在前半部分有一张桌子，在另一半有一个 disqus 评论系统。在第二列中，我只是在前半部分有另一张桌子。后半段是空白。

这是一张图片

可视化

我实际上面临的问题是，当我在 disqus 评论系统中添加评论时，第二列（带有 TABLE2）正在下降，因为 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

我希望我说清楚了。

4

1 回答 1

1

重新排列您的 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-01T10:01:52.313 回答