Bootstrap - плавающее действие кнопки меню размер и тень

Question

Я создаю приложение с Bootstrap 3.3 и Bootstrap Material Design framework. Я пытаюсь сделать кнопку плавающего действия, которая открывается при нажатии на нее.

В попытке сделать это, я создал этот Bootply, который имеет следующий код:

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

кнопка работает, но это не выглядит правильно. Есть две проблемы, которые заставляют меня гать. Во-первых, всплывающее меню не прозрачно. Существует как border и тень, от которой я не могу избавиться.

Во-вторых, я не могу использовать небольшую версию кнопок, как показано на Плавающие кнопки действия раздел страницы Bootstrap Material Design framework. Я не уверен, что я делаю неправильно.

Answer 1

Так что .dropdown-menu в bootstrap CSS по умолчанию box-shadow и border, который вы должны его сбросить, чтобы сделать его прозрачным.

Плюс в вашем Bootply он не применяет значки дизайна материалов, потому что вы не связывали шрифты.

Что касается маленьких иконок, добавить .btn-group-sm к .btn-group

Вот рабочий SNIPPET с примерами для каждого размера.

.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

Я бы не сказал, что это идеальный вариант, но следующее решение, как представляется, решает часть вашей проблемы.

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

К сожалению, я не был в состоянии выяснить, что material-icons класс не работал. Надеюсь, этот ответ поможет вам приблизиться к решению.