在css文件中本地托管的Bootstrap-Iso未正确显示glyphicons。需要修复

问题描述 投票:0回答:1

忍受我..:我正在尝试创建一个将在预先存在的网站上输入的表单。我不是专业人士,也不是网站的开发者,所以我的目的是在bootstrap隔离css中创建具有js条件格式的表单。我使用的原始资料可以在这里找到:https://formden.com/blog/isolate-bootstrap。我下载了文件,只将bootstrap-iso.css拖到我的主机文件夹中。(不确定我是否应该带上boostrap-theme.css?)

我拿出了表单和条件js,但是想在代码片段中向我展示我的问题。我无法让glyphicons与bootstrap iso css一起工作,并且需要知道如何纠正这种情况。在我的代码片段中看到,只有信封glyphicon出于某种原因才有效。当我链接到“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”时,glyphicons工作正常,但我失去了iso方面,我不确定开发人员是否只能填写表单。有人可以向我解释如何让glyphicons工作吗?我需要将它们用作工具提示悬停。

<link href="https://formden.com/static/assets/demos/bootstrap-iso/bootstrap-iso/bootstrap-iso.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
	<head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap-iso.css" /> 
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
        </style> 
	</head>
    

<body>

    
	<div class="bootstrap-iso"><!-- HTML Form (wrapped in an isolated Bootstrap 3 div)
	
	
    <div class="container-fluid"> 
        <div class="row"> <!--Bootstrap -->
            <div class="col-md-8 col-sm-8 col-xs-10">
            
            <p>Glyphicon user: <span class="glyphicon glyphicon-user"></span></p>

            <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
                   
            <p>exclamation icon: <span class="glyphicon glyphicon-exclamation-sign"></span></p>
            </div>
            </div>
  </body>
</html>
javascript css twitter-bootstrap glyphicons
1个回答
0
投票

首先,值得注意的是,你有两个<div>元素被注释掉,因为我认为是<div class="bootstrap-iso">旁边缺少结束评论。除此之外,你还引用了jQuery和Bootstrap ISO两次,但我认为这是试图让你的Snippet正常工作:)

至于你的实际问题,你只需要添加相关的CSS文件:https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

这可以在下面看到,我还更正了注释和引用的文件:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://formden.com/static/assets/demos/bootstrap-iso/bootstrap-iso/bootstrap-iso.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="bootstrap-iso">
    <!-- HTML Form (wrapped in an isolated Bootstrap 3 div)-->
    <div class="container-fluid">
      <div class="row">
        <!--Bootstrap -->
        <div class="col-md-8 col-sm-8 col-xs-10">
          <p>Glyphicon user: <span class="glyphicon glyphicon-user"></span></p>
          <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
          <p>exclamation icon: <span class="glyphicon glyphicon-exclamation-sign"></span></p>
        </div>
      </div>
    </div>
  </div>
</body>
© www.soinside.com 2019 - 2024. All rights reserved.