Bootstrap 字形：100% 宽度

Question

在我的网络应用程序中，我在网格内的 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;
}

此致。

Answer 1

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

Answer 2

这样做.. 使 glyphicon Star 图标响应。
你可以这样做。
使用它来完成您想在这里实现的目标。
与其说是为了填充宽度，不如说是为了满足你需要它做的事情。希望这会有所帮助。

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

但请阅读this info。

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

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

Bootstrap 字形：100% 宽度

Bootstrap glyphicon: 100% width

responsive-design

twitter-bootstrap

glyphicons