1

我正在尝试对齐我的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-groupdiv 需要display: inline添加到 less 文件之一，然后需要重新编译，以便使用新的样式规则更新 css 输出。

于 2013-09-19T10:03:18.990 回答