Bootstrap Button Collapse zur zweiten Zeile

Question

Ich frage mich, ob es eine Möglichkeit gibt, die Schaltflächen automatisch vertikal wachsen zu lassen, um das gesamte Label anzuzeigen, anstatt es dann mit Bootstrap und Font super zu schneiden.

Code:

<div class="well well-sm"> 
    <p><h5 style="underline"><u>Social Media:</u></h5></p> 
    <p> 
    <a href="" class="btn btn-block btn-social btn-facebook" target="_blank"> 
     <i class="fa fa-facebook"></i> <font size="2"> Like us on Facebook</font> 
    </a> 
    <a href="" class="btn btn-block btn-social btn-twitter" target="_blank"> 
     <i class="fa fa-twitter"></i> <font size="2"> Follow us on Twitter</font> 
    </a> 
    <a href="" class="btn btn-block btn-social btn-pinterest" target="_blank"> 
     <span class="fa fa-youtube-play"></span> <font size="2"> Watch us on YouTube</font> 
    </a> 
    </p> 
</div> 

Stromausgang:

____Small screen_____________large Bildschirm

... großer Bildschirm ist gut, aber ich mag die kleinen Bildschirmtasten ausgegeben haben wie :

Like us on < -first Linie

facebook < -zweiten Linie

Answer 1

die Antwort oben (von Ryan) Auf jeden Fall funktionieren würde word-wrap: break-word; aber einige Highlights über Bootstrap.

Bootstrap neigen dazu, etwas verstecktes CSS zu haben.

Vor allem die eine: overflow: hidden;, die manchmal nicht Arbeit wickeln Arbeit!

Schließlich, versuchen Sie inspect die Website, um zu sehen, was genau passiert mit Ihnen Code.

Hoffe diese Adresse Ihr Problem!