Question

我无法完全覆盖自举程序表格单元格。

我曾尝试过其他有关如何使按钮适合表格单元格的文章，但它们似乎都不适合自举程序。

<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>

如何使Bootstrap按钮适合Bootstrap表单元内部

1 个答案: