gpt4 book ai didi

css - Bootstrap : move descriptions from column titles to row names on mobile

转载 作者:行者123 更新时间:2023-11-28 16:16:11 27 4
gpt4 key购买 nike

我正在尝试使表格对移动设备响应更快,但遇到了列标题问题。

现在,桌面上的列标题是“显示颜色”、“向上”和“向下”。理想情况下,当它切换到移动设备时,“向上”和“向下”将移动到行,这样就不会说“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>

https://jsfiddle.net/wLdvcs06/

关于css - Bootstrap : move descriptions from column titles to row names on mobile,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58812444/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com