代码之家 › 专栏 › 技术社区 › sharath thota

如何更改glyphicon注释的高度和宽度(引导)

bootstrap-modal twitter-bootstrap css html

sharath thota · 技术社区 · 6 年前

我想更改glyphicon注释的高度和宽度,以及如何在glyphicon注释中显示文本。我使用的是引导数据库中的预定义注释。当我尝试使用内联样式更改高度和宽度时,它不起作用。但如果我改变了评论的颜色,它就会改变。

这是我的密码。

<!DOCTYPE html>
<html lang="en">
<head>
  <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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="panel panel-info">
      <div class="panel-heading">Learn by doing</div>
      <div class="panel-body">Each computer has a built-in instruction set that it knows how to execute by design.
          <form id="myForm">
              <span class="glyphicon glyphicon-comment"  onclick="radiotruehintbox()"></span> 
              <div class="radio">
                <label><input type="radio" id="true" onclick="radiotruehintbox()">True</label>
              </div>
              <div class="radio">
                <label><input type="radio" id="false" onclick="radiofalsehintbox()">False</label>
              </div>
            <div class="alert alert-success alert-dismissible" id="truebox" style= display:none>
                  <div class="close" data-dismiss="alert" aria-label="close">&times;</div>
                  <strong>&#10004;</strong> This alert box could indicate a successful or positive action.
            </div>
            <div class="alert alert-danger alert-dismissible" id="falsebox" style= display:none>

                <div class="close" data-dismiss="alert" aria-label="Close">&times;</div>
                <strong>&#10008;</strong> This alert box could indicate a dangerous or potentially negative action.
              </div>
          <p>computer uses intelligence to execute instructions.</p>
          <span class="glyphicon glyphicon-comment" onclick="radiofalsehintbox()"></span></p>
              <div class="radio">
                <label><input type="radio" id="true_2" onclick="radiohintbox()">True</label>
              </div>
              <div class="radio">
                <label><input type="radio" name="optradio">False</label>
              </div>
          </form>
          <button type="button" class="btn btn-primary btn-md" OnClick="ResetClick()" >Reset </button>     
      </div>
  </div>    
</div>

<script>
function radiotruehintbox() {
document.getElementById("false").checked = false;
document.getElementById('falsebox').style.display='none';
document.getElementById('truebox').style.display='block';

}
function radiofalsehintbox() {
document.getElementById("true").checked = false;
document.getElementById('truebox').style.display='none';
document.getElementById('falsebox').style.display='block';


}
function ResetClick() {
    document.getElementById("myForm").reset();
    document.getElementById("truebox").reset();
    document.getElementById("falsebox").reset();
}
</script>
</body>
</html>

2 回复 | 直到 6 年前

vishugosain 6 年前

使用字体大小增加图示符图标的大小,如下所示-

.glyphicon-comment{
    font-size: 24px
}

您不能在glyphicon内写入。

Dhinesh Valarman 6 年前

使用字体大小增加引导图标的大小,

不能单独增加高度或宽度。

.glyphicon-comment {
    font-size: 20px;
}

参考链接- https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

希望这有帮助,