我得到了所需的输出，但它仍然抛出一个错误，提示“未找到用于打印的字形”，尽管打印字形在输出中可见

问题描述

Q) 为儿童创建一个故事页面，在引导程序井容器中包含一个儿童故事。

页面的布局必须如下图

涵盖的概念：- 好吧，Glyphicons，引导程序的辅助类

注意事项：-

创建如图所示的故事布局。附上图片。
为类容器和井创建 div 标签
故事必须封闭在井内
为字形打印、搜索和信封创建适当的 div 标签
打印和信封必须是链接
搜索必须嵌入按钮内
为页脚创建一个带有警告危险类的div来保存版权信息

我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
       <!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
  <title>Bootstrap Example</title>
  <Meta charset="utf-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
   <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body> 

<div class="container">
<h2>Childrens story for the day</h2>
<div class="well">
    A fox passed by a grapevine winding around the branches of a tree. He saw a bunch of grapes hanging above. He jumped to snatch some grapes. But the grapes were too high for him. "You have to grow up fox," said a monkey living on the tree; "here take some grapes."The monkey shook the branch and a few grapes fell out. The fox caught them neatly in his mouth. "Are they sweet?" asked the monkey. "Not so sweet,"the fox said as he walked away. The next day,the fox came by the tree again. He took a look at the bunches of grapes hanging above. He took a short run and jumped. This time he Could jump higher,but not high enough to get at the grapes. The friendly monkey pressed down the branch,helping the fox snatch one or two grapes as they fell."Is it sweet?" asked the monkey."Not so sweet,"said the fox as he walked away. The next day,the fox was back.This time he looked determined to get the grapes.
</div>
    <a id="gly1" href="#"  class=" btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print this story
    </a>
    
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search for new stories
    </button>
    
     <a id="gly2" href="#"><span class="glyphicon glyphicon-envelope"></span>Mail this story</a>
     
</div>
<br>
<div id="foot" class="alert alert-danger">
    <strong>copyright information :- </strong> Do not copy or reproduce
</div>
</body>
</html>

required output image Error image

解决方法

class=" btn btn-success btn-lg"- 在你的打印类中使用它

在 glyphicon-print 的 span 标签中添加 id="print"

为您的打印、搜索和邮件目的使用单独的 div 并内嵌显示。

<div style="display: inline-block">
    <a>..</a>
</div>
<div style="display: inline-block">
    <button>..</button>
</div>
<div style="display: inline-block">
    <a>..</a>
</div>

这是可以工作的确切代码，错误不在打印类中，错误是您在关闭容器 div 之前关闭了它。您需要将容器结束 div 放在结束 body 标记之前

<!DOCTYPE html>
<html lang="en">
<head>
       <!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
   <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body> 

<div class="container">
<h1>Childrens story for the day</h1>
<div class="well">
    A fox passed by a grapevine winding around the branches of a tree. He saw a bunch of grapes hanging above. He jumped to snatch some grapes. But the grapes were too high for him. "You have to grow up fox," said a monkey living on the tree; "here take some grapes."The monkey shook the branch and a few grapes fell out. The fox caught them neatly in his mouth. "Are they sweet?" asked the monkey. "Not so sweet,"the fox said as he walked away. The next day,the fox came by the tree again. He took a look at the bunches of grapes hanging above. He took a short run and jumped. This time he could jump higher,but not high enough to get at the grapes. The friendly monkey pressed down the branch,helping the fox snatch one or two grapes as they fell."Is it sweet?" asked the monkey."Not so sweet,"said the fox as he walked away. The next day,the fox was back.This time he looked determined to get the grapes.
</div>
    <a id="gly1" href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print this story
    </a>
    
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search for new stories
    </button>
    
     <a id="gly2" href="#"><span class="glyphicon glyphicon-envelope"></span>Mail this story</a>
     
   
 
<div id="foot" class="alert alert-danger">
    <strong>Copyright Information :- </strong> Do not copy or reproduce
</div>
</div>
</body>
</html>

bootstrap-4 glyphicons twitter-bootstrap twitter-bootstrap-3