html - 如何使 Bootstrap 按钮适合 Bootstrap 表格单元格的内部

Question

我无法让我的按钮完全覆盖引导表单元格。

我尝试了其他关于如何使按钮适合表格单元格的帖子，但它们似乎都不适用于 Bootstrap 。

<tbody>
<tr>
  <td>Airport / Railway Station Drops and Pick-Ups</td>
  <td>Arunachaleeshwarar Temple, Adi Thiruvarangam Temple</td>
  <td>
    <div class="dropdown">
  <button style="height: 122px; width:159px;" class="btn btn- 
secondary dropdown-toggle" type="button" id="dropdownMenu2" data- 
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Beaches
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another 
action</button>
    <button class="dropdown-item" type="button">Something else 
here</button>
  </div>
  </div>
  </td>

我试图增加按钮的大小以适合单元格，但这只会增加单元格的大小，而不是按钮覆盖的单元格的大小。理想情况下，我希望它完全覆盖电池。

Answer 1

问题是您的内联样式覆盖了按钮属性。

style="height: 122px; width:159px;" 明确设置按钮的尺寸，因此一旦设置就不允许更改。如果您希望它填充整个 td，您可以删除该标记并将其替换为一个类，例如，将宽度设置为 100%。

#dropdownMenu2 {
  width: 100%;
  height: 100%;
}

<tbody>
  <tr>
    <td>Airport / Railway Station Drops and Pick-Ups</td>
    <td>Arunachaleeshwarar Temple, Adi Thiruvarangam Temple</td>
    <td>
      <div class="dropdown">
        <button class="btn btn- 
secondary dropdown-toggle" type="button" id="dropdownMenu2" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Beaches
  </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
          <button class="dropdown-item" type="button">Action</button>
          <button class="dropdown-item" type="button">Another 
action</button>
          <button class="dropdown-item" type="button">Something else 
here</button>
        </div>
      </div>
    </td>
  </tr>
</tbody>