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和我似乎無法擺脫的影子。

其次，我不能使用頁面的浮動動作按鈕部分所示的小按鈕版本。我不確定我做錯了什麼。

Answer 1

因此，引導程序CSS中的.dropdown-menu默認情況下爲box-shadow和border，您必須重置它才能使其透明。

加上你的Bootply它沒有應用材質設計圖標，因爲你沒有鏈接字體。

關於小圖標，添加.btn-group-sm到.btn-group

下面是一個工作代碼片段與每一個尺寸的例子。

.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類沒有工作。希望這個答案能幫助你更接近解決方案。