Question

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

我喜欢这样的glyphicon是全宽和比例高度（要正确显示）。

我该怎么办？

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

要执行此操作，请使glyphicon Star 图标响应你可以这样做。
用它来做你想要达到的目标。
不是要填充宽度，而是要根据您的需要进行调整。希望这会有所帮助。

public class MyMapFragment extends SupportMapFragment implements OnMapReadyCallback {

    private GoogleMap mMap;
    private Marker marker;


    public MyMapFragment() {
    }

    @Override
    public void onResume() {
        super.onResume();

        Log.d("MyMap", "onResume");
        setUpMapIfNeeded();
    }

    private void setUpMapIfNeeded() {

        if (mMap == null) {

            Log.d("MyMap", "setUpMapIfNeeded");

            getMapAsync(this);
        }
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        Log.d("MyMap", "onMapReady");
        mMap = googleMap;
        setUpMap();
    }

    private void setUpMap() {

        mMap.setMyLocationEnabled(true);
        mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
        mMap.getUiSettings().setMapToolbarEnabled(false);


        mMap.setOnMapClickListener(new GoogleMap.OnMapClickListener() {

            @Override
            public void onMapClick(LatLng point) {

                Log.d("MyMap", "MapClick");

                //remove previously placed Marker
                if (marker != null) {
                    marker.remove();
                }

                //place marker where user just clicked
                marker = mMap.addMarker(new MarkerOptions().position(point).title("Marker")
                        .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_MAGENTA)));

                Log.d("MyMap", "MapClick After Add Marker");

            }
        });

    }


}

但请阅读 this info 。

responsive glyphicon

如果您还希望div块的高度与星形图标一致，则将.star-size { font-size: 8.5vw; color:orangered; }类更改为此...

.inner-block

然后就会这样。

enter image description here

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

Answer 2

Glyphicons实际上是一种特殊字体的字符，所以它们不像那样真正地缩放。如果你真的想这样做，你应该创建一个图像并用width: 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); 
}

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

Bootstrap glyphicon：100％宽度

2 个答案: