Fatal编程技术网

Twitter bootstrap 引导图示符图标：100%宽度

twitter-bootstrap responsive-design

Twitter bootstrap 引导图示符图标：100%宽度,twitter-bootstrap,responsive-design,glyphicons,Twitter Bootstrap,Responsive Design,Glyphicons,在我的webapp中，网格中的div中包含一个glyphicon 我希望glyphicon是全宽和比例高度（正确显示） 我该怎么办 普朗克是： HTML是： <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 col-xs-offset-4" style="border: solid 2px red">

在我的webapp中，网格中的div中包含一个glyphicon

我希望glyphicon是全宽和比例高度（正确显示）

我该怎么办

普朗克是：

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>
注意。

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

另一种可能的（但令人讨厌的）解决方案是使用CSS转换，但这是一种黑客行为，不会自动扩展，需要一些额外的黑客行为才能正确定位：

.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); 
}
示例：

执行此操作。。使字形图标星型图标响应。
你可以这样做。
在这里，你可以用它来完成你想要实现的目标。
与其说是填充宽度，不如说是根据需要调整大小。 希望这有帮助

.star-size {
    font-size: 8.5vw;
    color:orangered;
}
但是请阅读

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

.inner-block {
    padding-top: 15px; 
    padding-bottom: 15px; 
    background-color:black;  
}
然后它就会这样


HTML/CSS块未出现
身体{
填充顶部：50px；
}
.垫片{
利润率最高：2%；
利润底部：2%；
}    
.街区{
高度：240px；
填充顶部：15px；
背景颜色：橙色；
}
.内块{
高度：120px；
填充顶部：15px；
背景色：黑色；
}     
.星号{
字体大小：8.5vw；
颜色：橙色；
}     
.中央分区{
位置：绝对位置；
左：0；
右：0；
保证金：自动；
}       
切换导航

    

  • 

  • 

  •
Glyph图标类似于字符。。。您应该尝试设置字体大小以设置图标大小。。。但尝试将其设置为100%宽度会有点棘手…唯一的“真正的方法”是使用glyphicon作为图像，而不使用媒体查询和字体大小…/img responsive…您可以尝试使用
字体大小：25vw
更改数字，以便字体与包含元素的视口宽度的比例相同。假设元素总是相同的比例。 
.inner-block {
    padding-top: 15px; 
    padding-bottom: 15px; 
    background-color:black;  
}