9

次の例を見ると、input-group が button-group の下にあることがわかります。

http://bootply.com/81723

すでに両方のグループをフローティング div に入れようとしましたが、ブラウザーはまだ行を分割しています。「.btn-group、.btn-group-vertical」に「display: inline-block」が含まれていることに気付きました。この行をコメントアウトした後、行は壊れませんが、両方の div の間にスペースがありません (ただし、「padding-right: 16px」でスペースを取得することを考えました)。

4

2 に答える 2

15

コンテナのテーブル表示を使用して実用的なソリューションを見つけました：

<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 (少ない):

.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;
  }
}
于 2013-09-19T08:32:47.993 に答える
4

どうですか

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

境界線を手動で折りたたんで、ホバー時と表示スペースで微調整する必要があります。

.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;
}
于 2013-09-18T12:50:31.273 に答える