web-dev-qa-db-ja.com

Bootstrap-フローティングアクションボタンメニューのサイズと影

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>

ボタンは機能しますが、正しく表示されません。私を悩ませている2つの問題があります。まず、ポップアップメニューは透明ではありません。 borderのようなものと私が取り除くことができないように見える影があります。

次に、 Bootstrap MaterialのFloating action buttonセクションに示されているような小さなバージョンのボタンを使用できません。デザインフレームワーク ページ。何が間違っているのかわかりません。

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

したがって、.dropdown-menu in 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>
7
dippas

理想的とは言えませんが、以下のことが問題の一部を解決しているようです。

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

残念ながら、material-iconsクラスが機能しない理由を理解できませんでした。うまくいけば、この答えがあなたが解決策に近づくのを助けるでしょう。

0
Dexter