屏幕调整大小和选项选择上的拆分按钮下拉换行

Question

我正在使用拆分按钮下拉菜单，我想知道是否有办法停止下拉按钮的换行？

以前，我有

<div class="btn-group btn-block"> // btn-block

即使调整屏幕大小，拆分按钮也会换行：

但我找到了解决方法 (GitHub Issue Link)

<div class="btn-group" style="width:100px;"> // Removed btn-block class, added style

但是现在如果我从下拉列表中选择一个选项，它会再次被包裹，无论屏幕大小/列宽如何（只要有足够的 btn-block 类，这个问题就不存在了列中的房间）：

无论屏幕大小或选择的选项如何，我都希望下拉菜单不换行。另外，我确实使用 col-md-* 设置了列的宽度

Also, when a long option is selected, it starts to overlap into the next column:

我希望我已经提供了足够的信息来发起有意义的回应。

JSFiddle Demo

<div class="col-lg-10" id="mapColumn">
<div>
<table class="table table-condensed tablesaw tablesaw-stack table-striped-column" data-tablesaw-mode="stack" id="table2">
<thead>
<tr>
  <th class="col-md-2">Map Actions</th>
  <th class="col-md-2">DB Actions</th>
  <th class="col-md-1">ID</th>
  <th class="col-md-3">Name</th>
  <th class="col-md-3">Features</th>
  <th class="col-md-1">Rating</th>
</tr>
</thead>
<tbody>

<tr>
  <td>
    <!-- <div class="btn-group btn-block"> -->
    <div class="btn-group" style="width:100px;">
      <button type="button" class="btn btn-sm btn-success">Actions</button>
      <button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" id="mapActions">
        <li><a>TOGGLE Map</a></li>
        <li><a>ROTATE View</a></li>
        <li><a>SAVE Pic to PC</a></li>
      </ul>
    </div>
  </td>

  <td>
    <!-- <div class="btn-group btn-block"> -->
    <div class="btn-group" style="width:100px;">
      <button type="button" class="btn btn-sm btn-success">Actions</button>
      <button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" id="dbActions">
        <li><a>UPDATE Features</a></li>
        <li><a>SAVE POV to DB</a></li>
      </ul>
    </div>
  </td>

  <td>123456</td>
  <td>Street A & Street B and a very very very long name</td>
  <td>
    <span class="label label-success">Label One</span>
    <span class="label label-success">Label Two</span>
    <span class="label label-success">Label Three</span>
    <span class="label label-success">Label Four</span>
  </td>
  <td>★★★★★</td>
</tr>
</tbody>
</table>
</div>

Answer 1

您可以添加以下样式：

.btn-group {
  white-space: nowrap;
  font-size: 0;
}
.btn-group-vertical>.btn, .btn-group>.btn {
  display:inline-block;
  float:none;
}

基本上这使得.btn 元素内联，这反过来又允许它利用nowrap 白色间距。我还必须将按钮组设置为 font-size:none 以删除按钮之间的间距，但 Twitter Bootstrap 为按钮字体大小设置了一个非相对的像素值，因此不应在 .btn-group 上设置 font-size:0一个问题。我从.btns 中删除了浮动，最后在标记中删除了100px 的固定宽度。

https://jsfiddle.net/jmarikle/b4qtrfmb/

编辑：

或者，您也应该能够使用display:flex

.btn-group, .btn-group-vertical {
  display:flex;
}
.btn-group-vertical>.btn, .btn-group>.btn {
  display:inline-flex;
  float:none;
}

https://jsfiddle.net/jmarikle/b4qtrfmb/1/