サイドバー付きのブートストラップ3脚注

Question

左側のサイドバー、テキストの中央の列、および脚注の右側の列を持つページを作成しようとしています。適切な段落の隣にあるように脚注をレイアウトする方法はありますか？

イメージからわかるように、それらはページ全体に広がっています。各脚注は、その特定の段落の隣にする必要があるよう

は限り私の知識が延びるにつれて、パディングやポジショニングは、動作しません（しかし、私は提案に開いています）。私はそれが異なるモニターのサイズのために十分に反応するようにしたいと思いますが、それはモバイルサイズに落とす必要はありません。

非常に簡単な答えがあり、私が追跡できなかったことを期待しています。どのような助けもありがたいです。たとえ "いいえ、簡単な方法はありません"ので、私はもう解決策を探す時間を無駄にしません。

ここに私の基本的なコード（明らかに大幅に簡略化された）です：

<section> 
    <div class="container"> 
     <div class="row full-page"> 
      <div class="left-sidebar col-sm-3"> 
       <!-- sidebar --> 
      </div> 
      <div class="main-content col-sm-9"> 
       <!-- text for main content --> 
      </div> 
      <div class="footnote col-sm-3"> 
       <!-- many footnotes here --> 
      </div> 
     </div> 
    </div> 
</section> 

ように、私もちょうど段落/脚注/段落/脚注を交互によるハックソリューションのビットを試してみましたが、いくつかの段落は、複数の脚注を持っていますアプローチもうまくいかなかった。

私は現時点で該当するCSSはありませんが、提案はありません。

ご協力いただきありがとうございます！私は多分あなたを助けることに、これを作った

Answer 1

短い答えは「いいえ、それを行うための簡単な方法は、（単独CSSで）ありません」です。問題は、ある要素（引用）をレイアウト（参照）に依存する画面上の位置に揃えようとしていることであり、いずれの引用も重ならないようにしてください。

これは、長い答えは「確かにjqueryを使用する」ということです。各引用文献を見つけ、そのトップオフセットを決定し、そのオフセットを一致する引用に適用する。 （引用している部分が重ならないようにしてください）

このjsfiddleはあなたのところに行くべきです。 https://jsfiddle.net/7qfwjh2x/4/

<section> 
    <div class="container"> 
    <div class="row full-page"> 
     <div class="left-sidebar col-sm-1"> 
     <!-- sidebar --> 
     </div> 
     <div class="main-content col-sm-6"> 
     <!-- text for main content --> 
     <p> 
      Some text<span data-footnote="1"></span>. 
     </p> 
     <p> 
      Some more text<span data-footnote="2"></span>. 
     </p> 
     </div> 
     <div class="footnote col-sm-4"> 
     <!-- many footnotes here --> 
     <p data-footnote="1">FOOTNOTE 1</p> 
     <p data-footnote="2">FOOTNOTE 2</p> 
     </div> 
    </div> 
    </div> 
</section> 

プロセスjQueryを使ってHTML。

$(document).ready(function() { 
    var currentCitationPosition = 0; 

    // For each citation reference in the text. 
    $('div.main-content span[data-footnote]').each(function(index) { 
    // Add the citation number. 
    var citationNum = $(this).data('footnote'); 
    $(this).html('(' + citationNum + ')'); 

    // Find the position of the citation reference, but don't overdraw an existing citation. 
    var offset = $(this).offset(); 
    if (offset.top > currentCitationPosition) { 
     currentCitationPosition = offset.top; 
    } 

    // Find the citation matching the citation reference. 
    var citation = $('div.footnote p[data-footnote="' + citationNum + '"]'); 
    if (citation) { 
     // Set this position to the offset.top of the reference, or below the previous citation. 
     $(citation).offset({ 
     top: currentCitationPosition 
     }); 
     // Pad by the height of the current citation to prevent overdraw. 
     currentCitationPosition += $(citation).height(); 
    } 

    }); 
}); 

幸運を祈る！

Answer 2

：https://jsfiddle.net/DTcHh/20321/

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

body { 
    margin: 10px; 
} 

.table-row { 
    display: table-row; 
} 
.paragraph, .footnote { 
    display: table-cell; 
} 
.footnote { 
    vertical-align: bottom; 
    float: none; 
} 

<section> 
    <div class="container"> 
     <div class="row full-page"> 
      <!-- repeat foreach paragraph and apply css to paddin/margin = 0 --> 
      <div class="row table-row"> 
       <div class="col-sm-3 left-sidebar paragraph"> 
        <!-- sidebar --> 
        text 
       </div> 
       <div class="col-sm-6 main-content paragraph"> 
       <!-- text for main content --> 
        <p> 
         texttexttexttext<br/> 
         texttexttexttext<br/> 
         texttexttexttext<br/> 
         texttexttexttext<br/> 
         texttexttexttext<br/> 
         texttexttexttext<br/> 
        </p> 
       </div> 
       <div class="col-sm-3 footnote"> 
        <p> 
         footnote<br/> 
         footnote<br/> 
         footnote<br/> 
        </p> 
        <!-- many footnotes here --> 
       </div> 
      </div> 
      <div class="row table-row"> 
       <div class="col-sm-3 left-sidebar paragraph"> 
        <!-- sidebar --> 
        text 
       </div> 
       <div class="col-sm-6 main-content paragraph"> 
       <!-- text for main content --> 
        <p> 
         texttexttexttext<br/> 
         texttexttexttext<br/> 
         texttexttexttext<br/> 
         texttexttexttext<br/> 
         texttexttexttext<br/> 
         texttexttexttext<br/> 
        </p> 
       </div> 
       <div class="col-sm-3 footnote"> 
        <p> 
         footnote<br/> 
         footnote<br/> 
         footnote<br/> 
        </p> 
        <!-- many footnotes here --> 
       </div> 
      </div> 
     </div> 
    </div> 
</section>