bootstrap button group text schrumpft auf Seite Größe ändern

Ich habe eine Gruppe von Schaltflächen in einer berechtigten Schaltflächengruppe.bootstrap button group text schrumpft auf Seite Größe ändern

Wenn ich die Seite der Größe ich so etwas wie diese:

Was kann ich tun, um nicht auf die Schaltfläche Text schrumpfen zu lassen? Vielleicht halten Sie die Größe der Seite an einer bestimmten Grenze an oder lassen Sie die Schaltflächen vertikal werden. (Gleiches Verhalten von Standard-Bootstrap-Verhalten)

<div class="btn-group btn-group-justified" role="group"> 
    <div class="btn-group" role="group"> 
    <button type="button" class="btn btn-default"> 
     Group A 
    </button> 
    </div> 
    <div class="btn-group" role="group"> 
    <button type="button" class="btn btn-default"> 
     Group B 
    </button> 
    </div> 
    ....

A running example on plnkr

Quelle

2017-04-01 EddyG

Geben Sie 'white-space: normal;' auf ' – Alex

Auf einer Seite .btn' enthält Nur eine Tastengruppe funktioniert nicht, aber es funktionierte auf einer Seite mit zusätzlichem Inhalt, danke – EddyG

Ihre Tasten auf mobilen Auflösung Drop down

@media(max-width: 480px){ 
    .btn-group { 
    display: block !important; 
    width: auto !important; 
    } 
}

Quelle

2017-04-01 07:30:23

Stellen Sie die Schriftgröße innerhalb <button> mit vw (Darstellungsbreite) Größe Einheit. inkludieren diese benutzerdefinierte CSS in Ihrer style.css-Datei:

.btn-group > button { 
    font-size: 1.5vw; 
}

Zu Ihrer Information 1vw = 1% der Darstellungsbreite. Erfahren Sie mehr darüber here
Hoffe das beantworten Ihre Frage.

/* Styles go here */ 
 

 
.btn-group > button { 
 
    font-size: 1.5vw; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="container" style="margin-top:20px"> 
 
    <div class="btn-group btn-group-justified" role="group"> 
 
     <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default"> 
 
      Group A 
 
     </button> 
 
     </div> 
 
     <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default"> 
 
      Group B 
 
     </button> 
 
     </div> 
 
     <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default"> 
 
      Group C 
 
     </button> 
 
     </div> 
 
     <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default"> 
 
      Group D 
 
     </button> 
 
     </div> 
 
     <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default"> 
 
      Group E 
 
     </button> 
 
     </div> 
 
     <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default"> 
 
      Group F 
 
     </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-04-01 07:28:27

bootstrap button group text schrumpft auf Seite Größe ändern

Antwort

Verwandte Themen