td 中的引导按钮下拉菜单，在 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
或查看引导示例 http://getbootstrap.com/javascript/#dropdowns-examples