1

基本的に2つのボタンの隣にbtn-groupあるコントロールを揃えようとしています。Dropdown

これは私が現在得ているものです：

ここに画像の説明を入力

Dropdownを次の行にしたくありません。同一線上に置きたい。これらのボタンは、明らかに , の一部であるタグ<td>を使用しています。<tr><table>

これを ASP.NET MVC で開発しました。

<td>
   @Html.ActionLink(..Edit Button..)
   @Html.ActionLink(..Delete Button..)
   <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle btn-mini" data-toggle="dropdown">Move Listing <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
         <li>@Ajax.ActionLink(...)</li>
         <li>@Ajax.ActionLink(...)</li>
         <li>@Ajax.ActionLink(...)</li>
         <li>@Ajax.ActionLink(...)</li>
      </ul>
   </div>
</td>

更新：ブートストラップCSS

.btn-group {
  position: relative;
  *margin-left: .3em;
  font-size: 0;
  white-space: nowrap;
  vertical-align: middle;
}

.btn-group:first-child {
  *margin-left: 0;
}

.btn-group + .btn-group {
  margin-left: 5px;
}

.btn-group > .btn + .dropdown-toggle {
  *padding-top: 5px;
  padding-right: 8px;
  *padding-bottom: 5px;
  padding-left: 8px;
  -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-group > .btn-mini + .dropdown-toggle {
  *padding-top: 2px;
  padding-right: 5px;
  *padding-bottom: 2px;
  padding-left: 5px;
}

他にもありますが、これらが焦点になります。

更新：HTML

<td>
   <a class="btn btn-mini" href="...">Edit</a>
   <a class="btn btn-mini" href="...">Delete</a>
   <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle btn-mini" data-toggle="dropdown">Move Listing <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
         <li><a ...">Down</a></li>
         <li><a ...">Bottom</a></li>
      </ul>
   </div>
</td>

更新表示:インライン; 要素の検査で追加

ここに画像の説明を入力

4

1 に答える 1

0

div.btn-groupが にデフォルト設定されている可能性がありますdisplay:block。CSS ルールを追加して変更すると、display:inline修正される場合があります。

td .btn-group {
    display: inline;
}

更新: 議論に従って、.btn-groupdivdisplay: inlineはより少ないファイルの 1 つに追加する必要があり、css 出力が新しいスタイル ルールで更新されるように再コンパイルする必要があります。

于 2013-09-19T10:03:18.990 に答える