个人中心
gpt4 book ai didi

twitter-bootstrap - Bootstrap 字形图标 : 100% width

转载 作者：行者123 更新时间：2023-12-01 09:22:11 24 4
gpt4 key购买 nike

在我的 web 应用程序中，我在网格中的 div 中包含一个字形图标。

我希望字形图标是全宽和成比例的高度(正确显示)。

我该怎么办？

Plunker 是:http://plnkr.co/edit/9GL54M1ozwwpQgJXlCbc?p=preview

HTML 是:

  <body>
    <div class="container-fluid">
     <div class="row">
       <div class="col-xs-4 col-xs-offset-4" style="border: solid 2px red">
         <span class="glyphicon glyphicon-star"></span>
       </div>
     </div>
    </div>
  </body>

CSS 是:

.glyphicon {
  width: 100%;
  color: green;
  border: 3px solid green;
}

问候。

最佳答案

要做到这一点.. 使字形 星形 图标具有响应性。
你可以这样做。
使用它来做你想要在这里实现的目标。
与其说是填充宽度，不如说是根据你需要做的大小。希望这会有所帮助。

.star-size {
    font-size: 8.5vw;
    color:orangered;
}

但请阅读 this info 。

responsive glyphicon

如果您还希望 div block 的高度响应星形图标，则将 .inner-block 类更改为此... 

.inner-block {
    padding-top: 15px; 
    padding-bottom: 15px; 
    background-color:black;  
}

然后它会像这样运行。

enter image description here 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>HTML/CSS Block not appearing</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
<style>
body {
    padding-top: 50px;
}
.spacer {
    margin-top: 2%;
    margin-bottom: 2%;
}    
.block {
    height: 240px;
    padding-top: 15px;  
    background-color:orangered;  
}
.inner-block {
    height: 120px;
    padding-top: 15px;  
    background-color:black;  
}     
  
.star-size {
    font-size: 8.5vw;
    color:orangered;
}     
.center-div {
    position: absolute;
    left:0;
    right:0;
    margin:auto;
        
}       
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>


    
<div class="container col-lg-12 spacer"></div>
        
  <div class="container block">
     <div class="row">
       <div class="col-xs-4 text-center inner-block center-div" >
         <span class="glyphicon glyphicon-star star-size"></span>
       </div>
     </div>
    </div>  

    

    <!-- Bootstrap core JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    

    
</body>
</html>

关于twitter-bootstrap - Bootstrap 字形图标 : 100% width，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31341012/

24 4 0
文章推荐： python - 无法在Anaconda上的虚拟环境中安装Spyder
文章推荐： java - 不同类中 Sprite 的代码
文章推荐： python - 如何使用Python删除二叉搜索树中的节点
文章推荐： java - 线程 "main"java.lang.NoSuchFieldError : INSTANCE in AWS SNS 中出现异常
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com