Question

我遇到了 Bootstrap 3 按钮下拉列表的问题。你可以在这里看到我的两个例子：

http://www.bootply.com/W1dLusilMk

http://www.bootply.com/GGBvggjYmu

第一个在第一个 td 中只有一个短值，这意味着最后一个没有被压扁。但是，如果你看第二个例子，那个内容很多更宽。

在桌面上，这不是一个很大的问题。但是，如果您在移动版本（该页面上的小图标）上查看它，您可以看到第二个示例中断。选择框分为2，插入符号转到第2行

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

起初，我虽然可以在按钮周围包裹一个div，但有一些类似的CSS会强迫＆＃34;强迫＆＃34;它保持在一条线上 - 但我一无所获。

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的原因导致插入符号没有进入第二行。选择不固定，它应该左移。
试试这个：http://www.bootply.com/mutJgilNS8
或参见bootstrap示例http://getbootstrap.com/javascript/#dropdowns-examples

在td内部的Bootstrap按钮下拉，继续2行

1 个答案: