Bootstrap glyphicon: 100% Breite

In meiner webapp habe ich ein glyphicon in einem div-Container innerhalb eines Grids.

Möchte ich gerne die glyphicon die gesamte Breite und proportionale Höhe (um korrekt angezeigt zu werden).

Wie kann ich tun ?

Plunker: http://plnkr.co/edit/9GL54M1ozwwpQgJXlCbc?p=preview

HTML ist:

  <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 ist:

.glyphicon {
  width: 100%;
  color: green;
  border: 3px solid green;
}

Grüße.

glyphicons sind wie Zeichen... sollten Sie versuchen, die Schriftgröße zu set icon-Größe... aber tryin um es mit 100% Breite wird ein bisschen schwierig...
nur "wirkliche Möglichkeit", um die Arbeit zu tun, ohne Verwendung von media queries und schriftart-Größe verwenden Sie Ihre glyphicon als ein Bild... / img-responsive...
Sie Experimentieren konnten mit font-size:25vw änderung der Anzahl, so dass die Schrift ist die gleiche Anteil der viewport-Breite, wie es ist-element enthalten. Unter der Annahme, dass das element ist immer der gleiche Anteil.

InformationsquelleAutor user3181983 | 2015-07-10

  1. 0

    Glyphicons sind eigentlich Zeichen in einer speziellen schriftart, so dass Sie nicht wirklich scale-like, die. Wenn Sie wirklich wollen, es zu tun, sollten Sie ein image erstellen und Strecke, die mit width: 100% zum Beispiel.

    Weitere mögliche (aber unangenehme) Lösung wäre die Verwendung von CSS-Transformationen, aber es ist ein hack, nicht automatisch zu skalieren und erfordert einige zusätzliche hacks an position korrekt:

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

    Beispiel: http://plnkr.co/edit/Xk19bLqZKj7sDulZ6AiH?p=preview

    InformationsquelleAutor DavidG

Schreibe einen Kommentar