Bootstrap Collapse 干扰响应式表格布局 [英] Bootstrap Collapse interfering with responsive table layout
问题描述
我之前提出了一个与此相关的问题，但我意识到我在吠错树，所以我重新开始.我不知道为什么昨天这成了一个问题，但我已经能够在 jsFiddle 上重现它 - http://jsfiddle.net/dspitzle/22Sr5/4/.我有两个不同的表实例(代码包含在下面)，唯一的区别是我分配了 thead 和 tbody 标签 class='requests_targets collapse in' 以启用折叠功能(使用人字形标题中的按钮).带有折叠类的那个都被压扁了，所以显然响应式表结构被覆盖了.
在 Fiddle 上，当您折叠部分时(在它们消失之前)，您会注意到表格布局会自我修正.这到底是怎么回事?您可以看到我包含的唯一 CSS 和 Javascript 是 jquery 和 bootstrap 文件，以及一个用于切换按钮上人字形的函数.
<div class="row"><div class="col-sm-12"><div class="table-responsive"><table class="table table-striped table-condensed" id='request_header'><caption class="h2">未完成的请求 [1]<button class="btn section-toggle btn-default btn-sm" data-toggle="collapse" data-target=".requests_targets"><span class="icon_toggle glyphicon glyphicon-chevron-up"></span></caption><头><tr><th>姓名</th><第>日期</th><th>Service</th><th>状态</th><th></th><th></th></tr></thead><tr><td>姓氏，名字</td><td>2/28/2014</td><td>书籍/玩具</td><td>进行中</td><td><a href="#" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span></＞</td><td><a href="#" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span>儿童</a></td></tr></tbody><div class="col-sm-12"><div class="table-responsive"><table class="table table-striped table-condensed" id='request_header2'><caption class="h2">未完成的请求 [1]<button class="btn section-toggle btn-default btn-sm" data-toggle="collapse" data-target=".requests_targets"><span class="icon_toggle glyphicon glyphicon-chevron-up"></span></caption><thead class="requests_targets 折叠在"><tr><th>姓名</th><第>日期</th><th>Service</th><th>状态</th><th></th><th></th></tr></thead><tbody class="requests_targets 折叠在"><tr><td>姓氏，名字</td><td>2/28/2014</td><td>书籍/玩具</td><td>进行中</td><td><a href="#" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span></＞</td><td><a href="#" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span>儿童</a></td></tr></tbody>
奇怪，我一定是在发帖前不小心擦了代码
解决方案 在您的样式表中使用以下内容.(在调用 bootstrap.css 之后)
#request_header .collapse.in,#request_header2 .collapse.in {显示:表行组；}
I put in an earlier question related to this, but I realized I was barking up the wrong tree, so I'm starting over. I don't know why this became a problem yesterday, but I've been able to reproduce it at a jsFiddle - http://jsfiddle.net/dspitzle/22Sr5/4/ . I have two different instances of a table (code included below), the only difference being that I have the thead and tbody tags assigned class='requests_targets collapse in' to enable the Collapse functionality (using the chevron button in the caption). The one with the collapse classes is all squished, so apparently the responsive table structure is being overriden.
On the Fiddle you'll notice that the table layout briefly corrects itself when you collapse the sections (before they disappear). What the hell is going on here? You can see that the only CSS and Javascript I've included are the jquery and bootstrap files, along with one function to toggle the chevrons on the buttons.
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-striped table-condensed" id='request_header'>
<caption class="h2">Outstanding Requests [1]
<button class="btn section-toggle btn-default btn-sm" data-toggle="collapse" data-target=".requests_targets"><span class="icon_toggle glyphicon glyphicon-chevron-up"></span>
</button>
</caption>
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Service</th>
<th>Status</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>LastName, FirstName</td>
<td>2/28/2014</td>
<td>Books/Toys</td>
<td>In Progress</td>
<td><a href="#" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span></a>
</td>
<td><a href="#" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span> Child</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-striped table-condensed" id='request_header2'>
<caption class="h2">Outstanding Requests [1]
<button class="btn section-toggle btn-default btn-sm" data-toggle="collapse" data-target=".requests_targets"><span class="icon_toggle glyphicon glyphicon-chevron-up"></span>
</button>
</caption>
<thead class="requests_targets collapse in">
<tr>
<th>Name</th>
<th>Date</th>
<th>Service</th>
<th>Status</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody class="requests_targets collapse in">
<tr>
<td>LastName, FirstName</td>
<td>2/28/2014</td>
<td>Books/Toys</td>
<td>In Progress</td>
<td><a href="#" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span></a>
</td>
<td><a href="#" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span> Child</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
EDIT: Weird, I must have wiped the code accidentally before posting
解决方案 Use following to your stylesheet. (after calling bootstrap.css)
#request_header .collapse.in,
#request_header2 .collapse.in {
display: table-row-group;
}
这篇关于Bootstrap Collapse 干扰响应式表格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆