Ausklappmenü mit fester Breite verwenden Bootstrap

.menu { 
 
\t max-width: 350px; 
 
\t margin: 50px; 
 
}

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
    \t <title>Booting the mind with Bootstrap</title> 
 
    \t <meta charset="utf-8"> 
 
    \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    \t <link rel="stylesheet" type="text/css" href="style.css"> 
 
    </head> 
 
    <body> 
 
    \t <div class="container-fluid"> 
 
    \t \t <div class="btn-group-vertical menu"> 
 
    \t \t \t <button type="button" class="btn btn-default btn-block menuitem" data-toggle="collapse" data-target="#demo">Apple</button> 
 
    \t \t \t <div id="demo" class="collapse"> 
 
    \t \t \t \t Hello world! I am Raj. I am trying to make something. But I don't know if I could do that. 
 
    \t \t \t </div> 
 
    \t \t \t <button type="button" class="btn btn-default menuitem">Samsung</button> 
 
    \t \t \t <button type="button" class="btn btn-default menuitem">Sony</button> 
 
    \t \t </div> 
 
    \t </div> 
 
    </body> 
 
    </html>

Ich versuche, ein zusammenklappbare Taste Menü mit einer festen Anfangsbreite unter Verwendung von Bootstrap zu erstellen. Ich möchte, dass dieses Menü reagiert. Indem ich die Breite der Knopfgruppe einstelle, kann ich ein Menü mit einer perfekten Breite bekommen. Ich verliere jedoch seine Reaktionsfähigkeit. Durch das Ersetzen der Breite Eigenschaft in der CSS-Datei mit dem max-width Eigenschaft, erhalte ich eine ansprechende Menü. Aber dann ändert sich die Breite des Menüs, wenn ein Menüelement erweitert und ausgeblendet wird. Ich habe auch versucht die Breite einzustellen, max-width und min Breiten von .btn Klasse. Aber all diese Prüfungen verliefen vergeblich. Gibt es einen Weg, durch den ich sowohl Reaktionsfähigkeit als auch eine feste Breite erreichen kann?

Quelle

2017-09-09 Rajalaxmi Mishra

Versuchen Sie, diese

.menu { 
    width: 350px; 
    margin: 50px; 
} 
@media only screen and (max-width: 769px) { 
    .menu{ 
    width:25%; 
    } 
}

Probe fiddle ..

Quelle

2017-09-09 07:36:00

Ausklappmenü mit fester Breite verwenden Bootstrap

Antwort

Verwandte Themen