web-dev-qa-db-fra.com

Bootstrap - Ombre et taille du menu du bouton d'action flottante

Je construis une application avec Bootstrap 3.3 et Cadre de conception de matériel Bootstrap . J'essaie de créer un bouton d'action flottant qui s'ouvre lorsque vous cliquez dessus.

Pour tenter de faire cela, j'ai créé ce Bootply , qui a le code suivant:

<div class="btn-group dropup floating-action-button">
    <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i></button>
    <ul class="dropdown-menu dropdown-menu-right" style="min-width:0; background-color:transparent;">
        <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a></li>
    </ul>
</div>

Les boutons fonctionnent, mais cela ne semble pas correct. Deux problèmes me rendent fou. Tout d'abord, le menu contextuel n'est pas transparent. Il y a comme une border et une ombre dont je n'arrive pas à me débarrasser.

Deuxièmement, je ne peux pas utiliser la version réduite des boutons, comme indiqué dans la section Boutons d’action flottants du cadre de Bootstrap Material Design . Je ne suis pas sûr de ce que je fais mal.

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-material-design
7
user70192

Donc, le .dropdown-menu dans le CSS d'amorçage a par défaut box-shadow et border, que vous devez réinitialiser pour le rendre transparent.

De plus, dans votre Bootply, les icônes de conception de matériau ne sont pas appliquées, car vous n'avez pas lié les polices.

En ce qui concerne les petites icônes, ajoutez .btn-group-sm à .btn-group

Voici un extraitDE TRAVAILavec des exemples pour toutes les tailles.

.floating-action-button {
  position: relative;
  top: 100px;
  margin-left: 50px;
}
ul.dropdown-menu {
  box-shadow: none;
  border: 0;
  min-width:0;
  background:transparent
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Material Design fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Code -->
<div class="btn-group btn-group-lg dropup floating-action-button">
  <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
    </li>
  </ul>
</div><div class="btn-group dropup floating-action-button">
  <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
    </li>
  </ul>
</div>
<div class="btn-group btn-group-sm dropup floating-action-button">
  <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
    </li>
  </ul>
</div>
<div class="btn-group btn-group-xs dropup floating-action-button">
  <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
    </li>
  </ul>
</div>

6
dippas

Je ne dirais pas que c'est idéal, mais ce qui suit semble résoudre une partie de votre problème.

.dropdown-menu {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

Malheureusement, je n'ai pas pu comprendre ce qui ne fonctionnait pas avec la classe material-icons. Espérons que cette réponse vous aidera à vous rapprocher d'une solution.

0
Dexter