Bootstrap 3-Knopf-Gruppe und der input-Gruppe in einer Zeile

Wenn Sie einen Blick auf die folgenden Beispiel können Sie sehen, dass die input-group unter der button-Gruppe:

http://bootply.com/81723

Ich bereits versucht, indem Sie beide Gruppen in floating divs, aber der Browser immer noch brechen die Reihe.
Ich habe bemerkt, dass ".btn-group .btn-group-vertical" enthalten, ein "display: inline-block". Nach kommentieren Sie diese Zeile aus, die Zeile nicht zu brechen, aber ich habe nicht einen Raum zwischen den beiden div (obwohl ich dachte, dass man durch "padding-right: 16px")

InformationsquelleAutor IT KFV | 2013-09-18
  1. 15

    Gefunden, der eine funktionierende Lösung mit Tabelle-Anzeige für Behälter:

    <div class="Toolbar">
<div>
    <div class="btn-group">
        <button id="ButtonCreate" class="btn btn-default btn-sm" onclick="CreateItem()" title="Erstellen"><span class="glyphicon glyphicon-file"></span></button>
        <button id="ButtonUpdate" class="btn btn-default btn-sm" onclick="UpdateItem()" title="Bearbeiten"><span class="glyphicon glyphicon-pencil"></span></button>
        <button id="ButtonDelete" class="btn btn-default btn-sm" onclick="DeleteItems()" title="L&ouml;schen"><span class="glyphicon glyphicon-trash"></span></button>
        <button id="ButtonExport" class="btn btn-default btn-sm" onclick="ExportItems()" title="Exportieren"><span class="glyphicon glyphicon-export"></span></button>
    </div>
</div>

<div>
    <div class="input-group input-group-sm">
        <span class="input-group-btn"><button id="ButtonSearch" class="btn btn-default btn-sm" onclick="SearchItem()" title="Suchen"><span class="glyphicon glyphicon-search"></span></button></span>
        <input type="text" class="form-control" style="width: 300px;" placeholder="Suchen">
    </div>
</div>
</div>

    CSS (LESS):

    .Toolbar
{
  position: relative;
  display: table;
}

.Toolbar > div
{
  display: table-cell;
  padding-right: 8px;
  vertical-align: top;
}

.Toolbar
{
  .btn-group, .btn-group-vertical
  {
    vertical-align: inherit;
  }
}
    InformationsquelleAutor IT KFV
  2. 4

    Wie etwa

    <div class="input-group input-group-sm">
  <span class="input-group-btn btn-group-custom">
    <button id="ButtonCreate" class="btn btn-default btn-sm" onclick="CreateItem()" title="Erstellen"><span class="glyphicon glyphicon-file"></span></button>
    <button id="ButtonUpdate" class="btn btn-default btn-sm" onclick="UpdateItem()" title="Bearbeiten"><span class="glyphicon glyphicon-pencil"></span></button>
    <button id="ButtonDelete" class="btn btn-default btn-sm" onclick="DeleteItems()" title="Löschen"><span class="glyphicon glyphicon-trash"></span></button>
    <button id="ButtonExport" class="btn btn-default btn-sm" onclick="ExportItems()" title="Exportieren"><span class="glyphicon glyphicon-export"></span></button>
    <button id="ButtonSearch" class="btn btn-default btn-sm" onclick="SearchItem()" title="Suchen"><span class="glyphicon glyphicon-search"></span></button>
  </span>
  <input class="form-control" style="width: 300px;" placeholder="Suchen" type="text">
</div>

    Müssen Sie manuell Zusammenbruch Grenzen und tweek, Sie auf schweben und für die visaul Raum:

    .btn-group-custom .btn {
  border-right-width: 0;
}
.btn-group-custom .btn:hover {
  border-right-width: 1px;
}
.btn-group-custom .btn:hover + .btn {
  border-left-width: 0;
}
#ButtonSearch {
  border-left-width: 1px;
  border-right-width: 0;
  margin-left: 16px;
}
#ButtonExport {
  border-right-width: 1px;
}
    • Wäre eine Möglichkeit, aber ich wollen, um eine visuelle Trennung zwischen den Tasten und der such-Feld
    • Ich bearbeitet meine Antwort
    • Danke, aber ich habe dort zu restyle die Suchen-Schaltfläche (Runde Ecken,..) und ich wollen zu lassen, bootstrap tun (denken, überschreiben einige bootstrap-css auf einem zentralen Platz); aufgrund der Tatsache, ich kann keine Antwort auf meine Frage innerhalb von 8 Stunden, ich poste meine Lösung (mit inline-block) morgen
    InformationsquelleAutor Jakub Michálek
Schreibe einen Kommentar