如何为弹出框添加页脚并使内容可滚动？使用 Twitter 引导程序 3答案

【问题标题】：How to add a footer to popover and make content scrollable? Using Twitter bootstrap 3如何为弹出框添加页脚并使内容可滚动？使用 Twitter 引导程序 3
【发布时间】：2014-04-02 04:15:02
【问题描述】：

这是图片（我必须做的）

如何为弹出框添加页脚并使内容可滚动？使用 Twitter 引导程序 3

【问题讨论】：

伙计，代码太多了。我已经上传了文件sendspace.com/file/s1a20g

标签： twitter-bootstrap twitter-bootstrap-3 scrollbar popover

【解决方案1】：

要创建带有页脚的弹出框，您必须更改弹出框 template 并添加一些 CSS 来设置该页脚的样式。在这里，我还在页脚中放置了一个按钮，正如您在绘图中包含的那样，但您必须弄清楚自己想用它做什么。

<div class="popover">
   <div class="arrow"></div>
   <h3 class="popover-title"></h3>
   <div class="popover-content"></div>
   <div class="popover-footer">
       <button type="button" class="btn btn-default">Button</button>
   </div>
</div>

$("[rel=details]").popover({
   trigger : 'click',  
   placement : 'bottom', 
   content : 'Lorem ipsum dolor ...',
   template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><div class="popover-footer"><button type="button" class="btn btn-default">Button</button></div></div>' 
});

设置页脚样式：

.popover-footer {
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  background-color: #F7F7F7;
  border-bottom: 1px solid #EBEBEB;
  border-radius: 5px 5px 0 0;
}

使弹出内容可滚动：

.popover-content {
  overflow-y : scroll;
  height: 200px;  
}

查看演示 -> http://jsfiddle.net/3x4yD/

【讨论】：

您的 CSS 错误，因为您使用的正是您必须更改边框属性的标题：border-top: 1px solid #EBEBEB; border-radius: 0 0 5px 5px;
错误的 CSS 是指 CSS 没有完成您想要的，或者给出的结果超出预期。这是我的解决方案，我是怎么做的——你认为布局应该不同，但一个并不比第二个更正确。而且我认为 OP 能够完全按照他的意愿设计他或她的弹出框样式。
Sarke，你应该说的正确方式是“你的 CSS 有一个小错误”。从他的角度来看，你这样做的方式是错误的，davikondrad 给出了一个可行的答案。