Я пытаюсь сделать таблицу более восприимчивой к мобильным устройствам и сталкиваюсь с проблемой с названиями столбцов.
В настоящий момент заголовки столбцов на рабочем столе - это «Цвет дисплея», «Вверх» и «Вниз.'В идеале, когда он переключается на мобильный, «вверх» и «вниз» будут перемещаться к строкам, так что вместо строк, например, «A:», будет «A: вверх», а затем будет следующая строка »A: Вниз "или что-то в этом роде. Есть ли встроенный способ сделать что-то подобное в начальной загрузке?
здесь - это 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>