twitter-bootstrap Bootstrap 字形：100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31341012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap glyphicon: 100% width
提问by user3181983
In my webapp I have a glyphicon contained in a div within a grid.
在我的 web 应用程序中，我有一个包含在网格内的 div 中的字形。
I'd like like the glyphicon to be full width and proportional height (to be displayed correctly).
我希望字形为全宽和成比例的高度（以正确显示）。
How can I do ?
我能怎么做 ？
Plunker is: http://plnkr.co/edit/9GL54M1ozwwpQgJXlCbc?p=preview
Plunker 是：http://plnkr.co/edit/9GL54M1ozwwpQgJXlCbc?p=preview
HTML is:
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 is:
CSS是：
.glyphicon {
width: 100%;
color: green;
border: 3px solid green;
}
Regards.
问候。
回答by AngularJR
To do this.. to make the glyphicon Staricon responsive.
You could do it this way.
Use this to do what you are wanting to achieve here.
Not so much to fill the width but to size to what you need it to do.
Hope this helps.
要做到这一点.. 使 glyphicon Star图标响应。
你可以这样做。
使用它来做你想要在这里实现的目标。
与其说是填充宽度，不如说是根据您的需要调整大小。希望这可以帮助。
.star-size {
font-size: 8.5vw;
color:orangered;
}
But please read this info.
但请阅读此信息。
If you also want the height of the div block to be reponsive with the star icon, then change the .inner-blockclass to this...
如果您还希望 div 块的高度响应星形图标，则将.inner-block类更改为...
.inner-block {
padding-top: 15px;
padding-bottom: 15px;
background-color:black;
}
And then it will act like this.
然后它会像这样。
<!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>回答by DavidG
Glyphicons are actually characters in a special font so they don't really scale like that. If you really want to do it you should create an image and stretch that with width: 100%for example.
Glyphicons 实际上是一种特殊字体的字符，所以它们不会像那样缩放。如果你真的想这样做，你应该创建一个图像并拉伸它，width: 100%例如。
Another possible (but nasty) solution would be to use CSS transformations, but it's a hack, doesn't automatically scale and requires some extra hacks to position correctly:
另一个可能的（但讨厌的）解决方案是使用 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);
}
Example: http://plnkr.co/edit/Xk19bLqZKj7sDulZ6AiH?p=preview
