Bootstrap 4下拉按钮不会在固定高度的表格中弹出

时间：2019-01-25 18:07:59

标签： css bootstrap-4

我在表格内部使用了bootstrap 4下拉按钮。当我限制tbody的高度时，按钮组菜单不会弹出。我想知道如何在固定高度的桌子上弹出菜单。

#table1 tbody {overflow-y:scroll; display:block;height:120px;}

<td>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
      <a class="dropdown-item" href="#">Link 4</a>
      <a class="dropdown-item" href="#">Link 5</a>
      <a class="dropdown-item" href="#">Link 6</a>
    </div>
  </div>
</div>
</td>

此图像显示了在没有固定高度的桌子外面弹出的菜单。 Menu pops outside table

此图显示了在菜单中“弹出”具有固定高度tbody的菜单。 Menu pops inside table

例如，请参见JSFiddle。

2 个答案:

答案 0 :(得分：2)

您需要将数据边界设置为scrollParent以外的其他值。即窗口，视口或html元素。

https://getbootstrap.com/docs/4.2/components/dropdowns/#options 

.g {
  display: inline-block;
  vertical-align: top;
  margin-right: 40px;
}

table {
  border: 1px solid #ccc;
}

#t1 tbody {
  overflow-y: scroll;
  display: block;
  height: 120px;
}

td {
  overflow: visible;
  border: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


<body>

  <div class="container">

    <div class="g">
      <h2>Dropdown 1</h2>
      <table id="t1">
        <tr>
          <td style="width:80px;">1</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td>2</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>4</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>5</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>

      </table>
    </div>


    <div class="g">
      <h2>Dropdown 2</h2>

      <table id="t2">
        <tr>
          <td style="width:80px;">1</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td>2</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>4</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>5</td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">
      Dropdown button
    </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <a class="dropdown-item" href="#">Link 4</a>
                <a class="dropdown-item" href="#">Link 5</a>
                <a class="dropdown-item" href="#">Link 6</a>
              </div>
            </div>
          </td>
        </tr>

      </table>
    </div>

答案 1 :(得分：1)

您只需要禁用flip选项（data-flip="false"）即可禁用Popper的重叠逻辑，并将boundary选项设置为“ table” ... 

<div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-flip="false" data-boundary="table">
            Dropdown button
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
            <a class="dropdown-item" href="#">Link 4</a>
            <a class="dropdown-item" href="#">Link 5</a>
            <a class="dropdown-item" href="#">Link 6</a>
        </div>
</div>

演示：https://www.codeply.com/go/XnCyEdnLRX

More on the Dropdown

相关问题
最新问题