- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使表格对移动设备响应更快,但遇到了列标题问题。
现在,桌面上的列标题是“显示颜色”、“向上”和“向下”。理想情况下,当它切换到移动设备时,“向上”和“向下”将移动到行,这样就不会说“A:”的行,而是说“A:向上”,然后下一行将是“答:向下”或类似的东西。在 bootstrap 中是否有内置的方法来做这样的事情?
here是一个jsbin-你可以通过调整宽度来理解我的意思。目前,当您调整到移动尺寸(也称为更小)时,不清楚哪个下拉菜单是“向上”的,哪个是“向下”的
代码如下:
<!-- views/profile.ejs -->
<!doctype html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body { padding-top:80px; word-wrap:break-word; }
</style>
<script>
<link rel="stylesheet" type="text/css" href="/js/scripts.js" />
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 text-left">
<strong>Display Color</strong>
</div>
<div class="col-md-4 text-left">
<strong>Up</strong>
</div>
<div class="col-md-4 text-left">
<strong>Down</strong>
</div>
</div>
<div class="row">
<div class="col-md-4 text-left">
<strong>A:</strong>
</div>
<div class="col-md-4 text-left">
<select class="bootstrap-select btn col-md-12" name="color1U" autocomplete="off">
<option name="name0" value="0"
>white<span class="colorRectangle"></span>
</option>
<option name="name1" value="1"
>red<span class="colorRectangle"></span>
</option>
<option name="name2" value="2"
>orange<span class="colorRectangle"></span>
</option>
</select>
</div>
<div class="col-md-4 text-left">
<select class="bootstrap-select btn col-md-12" name="color1D" autocomplete="off">
<option name="name0" value="0"
>white</option>
<option name="name1" value="1"
>red</option>
<option name="name2" value="2"
>orange</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-4 text-left">
<strong>B: </strong>
</div>
<div class="col-md-4 text-left">
<select class="bootstrap-select btn col-md-12" name="color2U" autocomplete="off">
<option name="name0" value="0"
>white<span class="colorRectangle"></span>
</option>
<option name="name1" value="1"
selected="selected" >red<span class="colorRectangle"></span>
</option>
<option name="name2" value="2"
>orange<span class="colorRectangle"></span>
</option>
<option name="name3" value="3"
>yellow<span class="colorRectangle"></span>
</option>
</select>
</div>
<div class="col-md-4 text-left">
<select class="bootstrap-select btn col-md-12" name="color2D" autocomplete="off">
<option name="name0" value="0"
>white</option>
<option name="name1" value="1"
selected="selected">red</option>
<option name="name2" value="2"
>orange</option>
</select>
</div>
</div>
<input type="submit" value="Save"/>
</form>
</div>
</body>
</html>
最佳答案
看到这个 fiddle ,让我知道你是否想要这个?
<h1>
Resize Window
</h1>
<table>
<thead>
<tr>
<th>#</th>
<th>Company</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Sr. No.">1</td>
<td data-th="Company">quality designs</td>
<td data-th="Name">Eugene silinda</td>
<td data-th="Country">South Africa</td>
</tr>
</tbody>
</table>
关于css - Bootstrap : move descriptions from column titles to row names on mobile,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58812444/
我正在尝试通过命令行创建 NuGet 包,但我似乎无法弄清楚如何设置描述、作者、标题、摘要、发布说明和所有者。包创建成功它只是给我这个警告: WARNING: Description was not
我可以将 name="description" 和 property="og:description" 组合在同一个元标记中吗? 最佳答案 TL;DR 编号 当然,在您的代码中,您可以做任何事情。 ;
我可以将 name="description" 和 property="og:description" 组合在同一个元标记中吗? 最佳答案 TL;DR 编号 当然,在您的代码中,您可以做任何事情。 ;
我正在尝试在 MySQL 表上执行 INSERT 语句。表结构如下 CREATE TABLE `charges` ( `sgl_id` int(11) NOT NULL AUTO_INCREMEN
我正在尝试修改 ErrorProtocol 的描述输出。但是这个片段给了我无限循环。 enum GeneralError: ErrorProtocol, CustomStringConvertible
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 3 年前。 Improve
我正在一个有 100 多个页面的网站上工作,不知何故我忘记了所有关于元描述的内容。然而,Yoast 已经自动添加了“og:description”标签,这些标签实际上具有我在每个页面上的元名称=“描述
我尝试完成的是使用 GDataXML 获取 RSS2 提要项的 src 属性.提要的项目 xml 是这样的: BlackBerry EMEA servers crash http://www
如何使用 yoast-seo 插件删除特定页面的 og:description 和 twitter:description 标签? 最佳答案 我自己解决了: add_filter("wpseo_ope
给定带有 dataProvider 和 Allure 进行报告的 TestNG 测试类,需要根据 DataProvider 修改 Allure 的报告以具有 (@Test(description)、@
em在中是什么意思 ... 这是从 firefox 插件 install.rdf 文件中提取的。我很好奇 em 部分添加了什么。我在 Google 上也找不到解决方案。 最佳答案 em 是包含 des
我正在尝试使用 Sequelize 创建模型。但是方法 createPost() 抛出错误: Argument of type '{ title: string; description: strin
获取网站的<meta name="keywords" content="" />和<meta name="description&quo
我们一般在调试程序的时候,有些操作会莫名地失败,又没有错误消息提示,特别是在执行数据库操作的时候,明明执行过去了,可就是数据库里没有记录变动,很是郁闷!今天刚才在搞FSO删除操作时就出现了这样的问题
我是 R 包开发的新手,我不确定这是否是一个常见错误。我正在开发 GitHub 上可用的新包:https://github.com/jroberayalas/ahnr .我在装有 OS X Yosem
如何提取给定项目标签的描述?例如,对于巴拉克·奥巴马 (Q76) link有一个列出的描述:“美国第44任总统”。我该如何检索这个?我可以使用以下方法提取“标签”: PREFIX rdfs: PRE
在堆栈溢出中进行搜索时,大多数情况下会显示搜索摘录(帖子/问题的前40个单词左右)。在某些情况下,会显示更多文本,并且该文本包含搜索词。两个文本块均以省略号结尾。 如果您查看元标记“descripti
我有一个使用 scrapy 为我编码的网络抓取工具。 我希望从抓取工具抓取的网站中添加一个额外的字段。 列标题“Description”已在 CSV 数据库中创建,但未抓取任何内容。 # -*- co
我目前正在为 UWP 开发 MR 应用程序。我在 unity3d 中构建应用程序(在 5.5.2 和 2017.1.2 中测试),当我在 unity 中按下播放时一切正常,没有任何编译错误......
我有一个 NotSureItem 对象类,我在其中添加了项目的一些属性。在我的应用程序中,我将 Realm 用于数据库,但是当我在我的应用程序中添加描述属性时,它显示覆盖存储属性的错误。它还会给出一些
我是一名优秀的程序员,十分优秀!