Ich versuche, einen Download-Button mit einem Symbol zu erstellen, mit Bootstrap 4 und Font awsome für das Symbol. Die Sache ist, wenn ich die Ikone mit:Bootstrap 4 Buttonwith iFont Symbol schiebt Text außerhalb
<i class="fa fa-mobile fa-3x pull-left" ></i>
es den Text aus dem Knopf drückt, und ich kann nicht auf die Schaltfläche Breite mit dem Inhalt wachsen erhalten.
ist hier mein jsFiddle:
http://jsfiddle.net/x1hphsvb/48/
definieren gerade Breite für #txtAppStore, oder setzen, dass alle div wie col-md-3 bis Bootstrap und zentrieren, dann in col-MD-3-Sie kann diesen Knopf mit der Breite putten: 100%; und zum Beispiel innerhalb von txt für 80% der Breite. Schnellste Lösungen aber nicht "auto" ist:
#txtAppStore {
width: 150px;
}
Das ist, weil Sie Ihr <i> Element schweben.
Entfernen Sie die pull-left Klasse von <i> und versuchen Sie dies:
<a class="d-inline-flex flex-nowrap">
</a>
Und eine Margin-Klasse zu Ihrem txtAppStorediv hinzuzufügen. Zum Beispiel:
<div id="txtAppStore" class="ml-3"></div>
Arbeits Geige: http://jsfiddle.net/x1hphsvb/50/
Beachten Sie, dass es in Ihrer Geige wird nicht funktionieren, weil Sie Bootstrap Alpha 2 zielen, versuchen Sie die neuesten Targeting: [Alpha 6] (https://v4-alpha.getbootstrap.com/getting-started/download/) – QuantumHive
Das Hauptproblem war, dass ich die folgende CSS hatte, dass ich verpasst, und war meine Knopfgröße zu begrenzen:
.black-background {
background-color:#000000;
padding: 6px;
width:150px;
}
Ich habe kommentieren und einige Änderungen vorgenommen, die der ersten Antwort entsprechen, und jetzt sieht es so aus, danke. http://jsfiddle.net/dumitrudan608/x1hphsvb/52/
Sie beziehen sich auf meine Geige Lösung, aber ich glaube nicht, dass das Ihre Absicht war – QuantumHive
Ja, tut mir leid Update, dass QuantumHive, ich gesendet das Falsche. Aber du hast mir den größten Teil meiner Lösung angeboten, Danke dafür. Ich habe meinen vorherigen Kommentar aktualisiert. Ich bin 1 Reputationspunkt davon entfernt, deine Antwort zu verbessern :) –
Ich bin mir nicht sicher, ob deine Antwort deine Frage beantwortet? Sie sagen, dass Sie wegen der 'width: 150px;' Ihre Schaltflächengröße eingeschränkt haben, aber in Ihrer Frage haben Sie eine [fiddle] (http://jsfiddle.net/x1hphsvb/48/) eingefügt. In dieser Geige gibt es ** nein ** so etwas wie eine 'Breite'. Wie ich schon sagte, ist das * Problem *, weil Sie 'Pull-Links' verwendet haben. Wenn du die 'pull-left'-Klasse von deiner ursprünglichen Geige entfernst, wirst du sehen, dass die Schaltfläche ihren Inhalt füllt. – QuantumHive
nicht wie eine flexible Lösung scheinen – QuantumHive
gesagt, dass ich was, wenn Bedarf% Bootstrap tun, – CommanderSpock