Question

我尝试创建一个页面，其中包含左侧导航侧边栏，文本中心列和脚注右侧列。是否有任何方法来布置脚注，使它们在相应的段落旁边？

正如您从图像中看到的那样，它们会在整个页面中传播。

据我所知，填充或定位不起作用，因为每个脚注都需要在其特定段落旁边（但我可以接受建议）。我希望它能够针对不同的显示器尺寸做出足够的响应，但它并不需要达到移动尺寸。

我希望有一个非常简单的答案，我还没有能够追踪到。任何帮助都是值得赞赏的 - 即使是“不”，也没有简单的方法可以做到这一点＆＃34;所以我不再浪费时间寻找解决方案。

这是我的基本代码（显然非常简化）：

<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>

我只是通过替换段落/脚注/段落/脚注尝试了一些hacky解决方案，但有些段落有多个脚注，因此这种方法也没有用。

我目前没有适用的CSS，但我愿意接受任何建议。

感谢您提供任何帮助！

Answer 1

简短的回答是＆＃34; nope，没有简单的方法（仅使用CSS）＆＃34;。问题是你试图将一个元素（引用）与屏幕上取决于布局（参考）的位置对齐，并且请不要让任何引用重叠。

那就是说，更长的答案是肯定的，只需使用jquery＆＃34;。找到每个引文引用，确定其顶部偏移量，并将该偏移量应用于匹配引文。（请不要让任何引文重叠。）

这个小伙子应该让你在那里分道扬.. 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>

带有侧边栏脚注的Bootstrap 3

2 个答案: