Question

所以我正在使用Bootstrap 4和Meteor并尝试创建一个在单击行元素时折叠的表。即使我使用<td>，我也会遇到崩溃行调整大小到第一个colspan="3"元素大小的问题。这是HTML：

<table class="table">
  <thead class="thead-inverse">
    <tr>
      <th>School</th>
      <th>Tech</th>
      <th>Date</th>
    </tr>
  </thead>
  {{#each school}}
  <tbody>
    <tr class="school-row">
      <td scope="row">{{trimString name}}</td>
      <td>{{trimString tech}}</td>
      <td>{{formatDate createdAt}}</td>
    </tr>
    <tr class="room-collapse">
      <td scope="row" colspan="3" data-parent=".room-collapse">
        <p>Hello this is a test.</p>
      </td>
    </tr>
  </tbody>
  {{/each}}
</table>

我正在使用.room-collapse作为jQuery目标。我现在没有应用任何额外的样式，jQuery触发器工作正常。任何想法或这只是一个错误？

Answer 1

这里的问题只是在我的案例中，Collapse目标元素需要是<div>。我试图附加到崩溃的任何表格元素都失败了但是在我嵌套<table class="table"> <thead class="thead-inverse"> <tr> <th>School</th> <th>Tech</th> <th>Date</th> </tr> </thead> {{#each school}} <tbody> <tr class="school-row"> <td scope="row">{{trimString name}}</td> <td>{{trimString tech}}</td> <td>{{formatDate createdAt}}</td> </tr> <tr> <td scope="row" colspan="3"> <div class="room-collapse"> <p>Hello this is a test.</p> </div> </td> </tr> </tbody> {{/each}} </table>后我很高兴。以下代码为例：

twbs:bootstrap@=4.0.0-alpha2

希望这有助于某人。它似乎与Bootstrap 4或我使用的特定包（即<div class="target">）有关。

简短回答：使用＆＃34;目标＆＃34;将崩溃包裹在.class中。成为您的目标#id或if let launchOptions != nil { return AWSMobileClient.sharedInstance.didFinishLaunching(application, withOptions: launchOptions!) } return false。

Bootstrap中的可折叠表4

1 个答案: