Bootstrap 字形图标：100% 宽度答案

【问题标题】：Bootstrap glyphicon: 100% widthBootstrap 字形图标：100% 宽度
【发布时间】：2015-07-11 09:11:25
【问题描述】：

在我的 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;
}

问候。

【问题讨论】：

glyphicons 就像字符...您应该尝试设置 font-size 来设置图标大小...但是尝试将其设置为 100% 宽度会有点棘手...
只有“真正的方式”来完成这项工作，不使用媒体查询和字体大小将使用您的字形作为图像.../img-responsive...
您可以尝试font-size:25vw 更改数字，以便字体与包含元素的视口宽度比例相同。假设元素总是相同的比例。

标签： twitter-bootstrap responsive-design glyphicons

【解决方案1】：

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

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

但请阅读this info。

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

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

然后它会像这样运行。

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

【讨论】：

【解决方案2】：

Glyphicons 实际上是一种特殊字体的字符，因此它们不会像那样缩放。如果你真的想这样做，你应该创建一个图像并使用width: 100% 拉伸它。

另一种可能（但令人讨厌）的解决方案是使用 CSS 转换，但它是一种 hack，不会自动缩放，并且需要一些额外的 hack 才能正确定位：

.glyphicon:before {
  margin-left: 120px;
  display:inline-block;
  transform:scale(17,1);
  -webkit-transform:scale(17,1);
  -moz-transform:scale(17,1)
  -ms-transform:scale(17,1);
  -o-transform:scale(17,1); 
}

示例：http://plnkr.co/edit/Xk19bLqZKj7sDulZ6AiH?p=preview

【讨论】：