css - td 内的 Bootstrap 按钮下拉菜单，分为 2 行

Question

Bootstrap 3 按钮下拉菜单出现问题。你可以在这里看到我的两个例子:

http://www.bootply.com/W1dLusilMk

http://www.bootply.com/GGBvggjYmu

第一个在第一个 td 中只有一个短值，这意味着最后一个不会被压扁。但是，如果您查看第二个示例，该内容多宽。

在台式机上，这不是什么大问题。但是，如果您在移动版本(该页面上的小图标)上查看它，您会发现第二个示例中断了。选择框分成 2 个，插入符号转到第 2 行

现在 - 一些背景。这个页面是响应式的。这些按钮所在的表格也是响应式的。选择框中的内容也会发生变化(因为它们可以是不同的房间类型)，因此固定宽度没有解决方案。

起初，我虽然可以在按钮周围包裹一个 div，并使用某种 CSS 来“强制”它保持在一行上 - 但我一无所获。

FWIW: 我还在包含下拉菜单的单元格上尝试了 nowrap 和 white-space:nowrap; - 但没有这样看起来很幸运:/

有人有什么建议吗？

可以正常使用，例如:

<table style="width: 100%;">
    <tbody><tr>
      <td>foo bar</td>
      <td>
          <div class="btn-group dropdown-m-wrapper" rel="1400::245::1">
              <button type="button" class="btn btn-default toggle-drop" rel="1400::245::1" id="select_1400_245_1">Choisir chambre</button>
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                  <li><a href="javascript:void(0);" rel="1400::245::1" class="change-room-selected-status" data-value="2"><b class="fa fa-user"></b> €1400</a></li>
              </ul>
          </div>      
      </td>

    </tr>
</tbody></table>

...但不是:

<table style="width: 100%;">
    <tbody><tr>
      <td>foo bar foo bar foo bar foo barfoo bar foo bar foo bar foo barfoo bar foo bar foo bar foo bar</td>
      <td>
          <div class="btn-group dropdown-m-wrapper" rel="1400::245::1">
              <button type="button" class="btn btn-default toggle-drop" rel="1400::245::1" id="select_1400_245_1">Choisir chambre</button>
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                  <li><a href="javascript:void(0);" rel="1400::245::1" class="change-room-selected-status" data-value="2"><b class="fa fa-user"></b> €1400</a></li>
              </ul>
          </div>      
      </td>

    </tr>
</tbody></table>

谢谢!

Answer 1

修复 td 的 with 会导致插入符号不进入第二行。选择不固定，应该左移。
试试这个:http://www.bootply.com/mutJgilNS8
或查看 Bootstrap 示例 http://getbootstrap.com/javascript/#dropdowns-examples