Twitter Bootstrap 中的响应式表格处理 [英] Responsive table handling in Twitter Bootstrap

查看:30
本文介绍了Twitter Bootstrap 中的响应式表格处理的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当表格的宽度超过跨度的宽度时,像这个页面:http://jsfiddle.net/rcHdC/

您会看到表格的内容在 span 之外.

处理这种情况的最佳方法是什么?

Bootstrap 3 现在具有开箱即用的响应表.万岁!:)

您可以在这里查看:https://getbootstrap.com/docs/3.3/css/#tables-responsive

在你的桌子周围添加一个 <div class="table-responsive"> ,你应该很高兴:

<table class="table">...

要使其适用于所有布局,您可以这样做:

.table-responsive{溢出-x:自动;}

When a table's width exceed the span's width, like this page: http://jsfiddle.net/rcHdC/

You will see the table's content is outside of the span.

What would be the best method to cater this case?

解决方案

Bootstrap 3 now has Responsive tables out of the box. Hooray! :)

You can check it here: https://getbootstrap.com/docs/3.3/css/#tables-responsive

Add a <div class="table-responsive"> surrounding your table and you should be good to go:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

To make it work on all layouts you can do this:

.table-responsive
{
    overflow-x: auto;
}

这篇关于Twitter Bootstrap 中的响应式表格处理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆