我在使用 Bootstrap 为我的学校创建时间表时遇到了问题。 时间表应对移动设备和平板电脑做出响应。
大屏幕的 View 工作完美，但是当它切换到移动 View 时，它会改变行和列..
平板电脑 View :http://imgur.com/U3ger2a,6ThcH1l
手机浏览器:http://imgur.com/U3ger2a,6ThcH1l#1
主要的 html 文件:
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Timetable</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="js/bootstrap.js" rel="stylesheet">
<!-- <link src="styles.css" rel="stylesheet"> -->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<link href="styles.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="text-center">
Timetable
</h2>
</div>
<div id="no-more-tables">
<table class="col-sm-12 table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th> </th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title=" ">07:45 |1| 08:35</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">08:35 |2| 09:25</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">09:30 |3| 10:20</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">10:35 |4| 11:25</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">11:30 |5| 12:20</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">12:20 |6| 13:10</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">13:10 |7| 14:00</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">14:00 |8| 14:50</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">15:00 |9| 15:50</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">15:55 |10| 16:45 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">16:50 |11| 17:40 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">17:40 |12| 18:30 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">18:55 |13| 19:40 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">19:40 |14| 20:25 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">20:30 |15| 21:15 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">21:15 |16| 22:00 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
有谁知道，如何解决这个问题？
最佳答案
替换您的 html 代码行
<div id="no-more-tables">与 <div class="table-responsive">
和
<table class="col-sm-12 table-bordered table-striped table-condensed cf">与 <table class="table col-sm-12 table-bordered table-striped table-condensed cf">
查看工作 example
关于html - Bootstrap 响应表 -> 用列更改行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28046506/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request
我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
