Bootstrap 3 手风琴面板不会打印答案

【问题标题】：Bootstrap 3 accordion panels will not printBootstrap 3 手风琴面板不会打印
【发布时间】：2015-01-05 05:09:21
【问题描述】：

我尝试了各种 css 组合，但我只能活这么久，我宁愿有人帮助我，然后在这个问题上度过余生！

我在页面上有手风琴面板，但客户希望我提供网站的 .pdf 文件，因此需要显示面板内容。我尝试了来自各个站点的各种代码建议，但无法使用常规打印命令或通过 Adobe Acrobat Pro XI 打印来扩展和显示/打印内容。尝试通过“打印网页”命令在 Acrobat 中打印结果相同。

我很确定这是我的 css 中的一个错误，但我有点新手。

提前感谢您的帮助！代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Print Example Bootstrap 3 Accordion</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
@media print {
.Accordion {
  overflow: visible !important;
}

.AccordionPanelContent {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
}
.collapse {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
}
}
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Twitter Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Twitter Bootstrap is a powerful front-end framework for faster and easier web development.</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc.</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

【问题讨论】：

标签： twitter-bootstrap printing accordion panel acrobat

【解决方案1】：

我知道这已经 5 年了，但我最终让我的面板出现的唯一方法是在我的标题中（在 head 标签之间）使用此代码：

<style>
@media print {
    .panel-body{
        float:none;
    }
}
</style>

【讨论】：