Bootstrap - Dimensioni e ombreggiatura del menu del pulsante di azione mobile

Question

Sto creando un'applicazione con Bootstrap 3.3 e Bootstrap Material Design framework. Sto cercando di creare un pulsante di azione mobile che si apre quando lo fai clic.

Nel tentativo di fare questo, ho creato questo Bootply, che ha il seguente codice:

<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> 

I pulsanti funziona, ma non sembra giusto. Ci sono due problemi che mi stanno facendo impazzire. Innanzitutto, il menu popup non è trasparente. C'è come un border e l'ombra di cui non riesco a liberarmi.

In secondo luogo, non è possibile utilizzare la versione ridotta dei pulsanti come mostrato nella sezione Pulsanti di azione mobile della pagina Bootstrap Material Design framework. Non sono sicuro di cosa sto sbagliando.

Answer 1

Quindi il .dropdown-menu in bootstrap CSS ha come valore predefinito box-shadow e border, che è necessario ripristinarlo per renderlo trasparente.

Inoltre nel Bootply non si applicano le icone di design dei materiali, perché non sono stati collegati i caratteri.

Per quanto riguarda le piccole icone, aggiungere .btn-group-sm-.btn-group

Qui è un lavoro SNIPPET con esempi per ogni dimensione.

.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>

Answer 2

Non direi che è l'ideale, ma il seguente sembra risolvere parte del tuo problema.

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

Purtroppo, non ero in grado di capire ciò che la classe material-icons non ha funzionato. Speriamo che questa risposta ti aiuti ad avvicinarti a una soluzione.