Bootstrap - Floating-action-button Menü-Größe und Schatten

Baue ich eine app mit Bootstrap 3.3 und Bootstrap-Material-Design Rahmen. Ich bin versucht, eine floating-action-button, der öffnet, wenn Sie darauf klicken.

In einem Versuch, dies zu tun, ich habe dies geschaffen Bootply, das den folgenden code:

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

Den Knöpfen funktioniert, aber es sieht nicht richtig aus. Es gibt zwei Probleme, die mich verrückt. Zuerst das popup-Menü ist nicht transparent. Es ist wie ein border und Schatten, ich kann nicht scheinen, um loszuwerden.

Zweiten, ich kann nicht die kleine version des buttons, wie gezeigt, in der Floating action buttons Abschnitt der Bootstrap-Material-Design Rahmen Seite. Ich bin mir nicht sicher, was ich falsch mache.

  • Es sieht für mich so aus, es ist nicht Kommissionierung bis die material-Symbole-Klasse. Ich inspizierte die Runde Floating Action Buttons auf der Bootstrap-Material-Design-framework-Seite und es sieht so aus, dass bestimmte Klassen ist die Bestimmung, die Symbole und die Rundung der Knöpfe.
InformationsquelleAutor user70192 | 2016-03-30
  1. 7

    Also die .dropdown-menu in der bootstrap-CSS hat standardmäßig box-shadow und border, die Sie haben, um es zurückzusetzen, um transparent zu machen.

    Plus im Bootply es ist nicht die Anwendung der Material-Design-Icons, weil du nicht den link Schriftarten.

    Bezug auf kleine Symbole, fügen Sie .btn-group-sm zu .btn-group

    Hier ist eine funktionierende SNIPPET mit Beispielen für alle Größen.

    CSS:

    .floating-action-button {
  position: relative;
  top: 100px;
  margin-left: 50px;
}
ul.dropdown-menu {
  box-shadow: none;
  border: 0;
  min-width:0;
  background:transparent
}

    HTML:

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

    InformationsquelleAutor dippas
  2. 0

    Ich würde nicht sagen, dass es ideal ist, aber Folgendes scheint die Lösung Teil des Problems.

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

    Leider war ich nicht in der Lage, herauszufinden, was die material-icons Klasse hat nicht funktioniert. Ich hoffe diese Antwort wird Ihnen helfen, näher an eine Lösung.

    InformationsquelleAutor Dexter
Schreibe einen Kommentar