我得到了所需的输出，但它仍然抛出一个错误，说 "glyphicon for print not found" 尽管打印字形在输出中可见

Question

Q) 为儿童创建一个故事页面，将儿童故事包含在 bootstrap 井容器中。

页面布局必须如下图

涵盖的概念：- 好吧，Glyphicons，Helper classes for bootstrap

备注：-

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

我的代码如下：

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

Answer 1

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

Answer 2

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

Answer 3

将单独的 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>

Answer 4

这是可以使用的确切代码，错误不在打印中 class 错误是您在容器 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">
<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>

我得到了所需的输出，但它仍然抛出一个错误，说 "glyphicon for print not found" 尽管打印字形在输出中可见

I got the required output but it still throws an error saying "glyphicon for print not found" though the print glyphicon is visible in the output

twitter-bootstrap

glyphicons

twitter-bootstrap-3

bootstrap-4