Bootstrap - Floating action bouton menu de la taille et de l'ombre

Je suis la création d'une application avec Bootstrap 3.3 et Bootstrap cadre de la Conception de Matériel. Je suis en train de faire un flottant bouton d'action qui s'ouvre lorsque vous cliquez dessus.

Dans une tentative pour ce faire, j'ai créé cette 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 fonctionne, mais il ne regarde pas à droite. Il y a deux questions qui me rend fou. Tout d'abord, le menu contextuel n'est pas transparent. Il y a comme un border et de l'ombre que je n'arrive pas à se débarrasser.

Deuxième, je ne peux pas utiliser la petite version des boutons comme indiqué dans le Flottant boutons d'action section de la Bootstrap cadre de la Conception de Matériel page. Je ne suis pas sûr de ce que je fais mal.

Il me semble que ce n'est pas ramasser le matériel-les icônes de la classe. J'ai inspecté la tour Flottante Boutons d'Action sur le Bootstrap Matériel de Conception de cadre de page et il semble que la classe spécifique est la détermination de ces icônes et l'arrondi des boutons.

OriginalL'auteur user70192 | 2016-03-30