Question

我的应用程序中遇到Bootstrap问题。我会尽可能地清楚：

我有2列，第一列我上半场有一张桌子，另一半有disqus评论系统。在第二栏中，我在上半场只有一张桌子。下半场是空白的。

这是一张图片

visualisation

我实际面临的问题是当我在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

我希望我说清楚。

Answer 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来管理表和其他内容之间所需的间距。

行和列Bootstrap，独立列

1 个答案: