响应表没有bootstrap
我正在处理的项目存在问题（驾驶学校的简单演示页）。我创造了一种用于驾驶标志的手风琴，并根据标志类型将它们分开。现在，对于每个类别的标志，我在手风琴元素中都有一个表。
问题是，最初该网站仅设计用于桌面，但现在我想让它具有响应性。其他所有内容都是通过@media查询完成的，但我不知道如何处理这些表。它们设计为桌面上的5列和移动设备上的一列（这就是我避免使用bootstrap的原因 - 很难使5列对齐和适合，或者到目前为止）。
这就是它在桌面上的样子，我想保留这个精确的设计。请忽略该文本 - 它是我的母语：
所以，这是我的CSS＆amp; HTML：
body {
margin-top: 30px;
background: -webkit-linear-gradient(#3097A4, #FFFBF4);
background: -moz-linear-gradient(#3097A4, #FFFBF4);
background: -o-linear-gradient(#3097A4, #FFFBF4);
background: linear-gradient(#3097A4, #FFFBF4);
}
.main-box {
margin: auto;
width: 1050px;
min-height: 1000px;
background-color: #fff;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #305a7d;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 85%;
padding: 14px 0px;
text-decoration: none;
width: 210px;
}
li a:hover {
background-color: #254661;
text-decoration: none;
color: white;
}
li a:active {
background-color: #254661;
text-decoration: none;
color: white;
}
.active {
background-color:#203c53;
}
.footer {
margin: auto;
width: 1050px;
text-align:right;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 60%;
color: #254661;
}
.description {
text-indent: 50px;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
padding: 20px 30px 20px 30px;
}
#left {
width:57%;
height: 100%;
float:left;
margin-top: 50px;
padding-left: 2%;
padding-right: 2%;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
display: block;
}
#right {
display: inline-block;
width:35%;
height: 100%;
margin-top: 50px;
padding-right: 4%;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #e8554e;
color: white;
padding: 10px 25px;
border: none;
border-radius: 4px;
cursor: pointer;
border-bottom: 5px solid #9a3834;
font-family:'Open Sans', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 100%
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #36648b;
}
/* Add a background color and some padding around the form */
.container-contact {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 480px;
margin: auto;
margin-top: 20px;
color: #204a65;
}
#formular {
text-align: center;
color: #204a65;
font-size: 160%;
font-weight: bold;
}
#contactinfo {
border-radius: 5px;
padding: 20px;
width: 300px;
height: 300px;
margin-top: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 85%;
line-height: 20px;
}
#contactinfo dl{
color: #e8554e;
text-transform: uppercase;
}
#contactinfo dl dd{
text-transform: initial;
display: block;
border: 0;
margin: 0;
padding: 0;
outline: 0;
font-family: Arial, Helvetica, sans-serif;
text-decoration: inherit;
color: #204a65;
font-size: 95%;
font-weight: initial;
}
#contactinfo a:link {
color: #204a65;
background-color: transparent;
text-decoration: none;
}
#contactinfo a:visited {
color: #204a65;
background-color: transparent;
text-decoration: none;
}
#contactinfo a:hover {
color: #204a65;
background-color: transparent;
text-decoration: underline;
}
#contactinfo a:active {
color: #204a65;
background-color: transparent;
text-decoration: underline;
}
#map{
width: 340px;
height: 340px;
border: 1px solid silver
}
.acte-necesare {
position: relative;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
.acte-necesare #titlu {
color: #204a65;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 85%;
}
.acte-necesare ul{
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
line-height: 20px;
}
#art24 {
list-style-type: none;
padding: 10px;
padding-top: 20px;
}
#art24 li {
font-size: 90%
}
.container-accordion {
width: 90%;
margin: auto;
padding-top: 50px;
padding-bottom: 20px;
}
.container-accordion #titlu {
color: #e8554e;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 120%;
}
.panel-content {
padding: 0px;
}
.panel-group {
padding-top: 15px
}
.table-indicatoare {
width: 100%;
text-align: center;
table-layout: fixed;
}
.table-indicatoare td {
border: 1px solid #ddd;
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
}
@media screen and (min-width:350px) and (max-width:480px){
.main-box{
width: auto;
display: block
}
nav li a{
width: auto;
}
nav li {
float: none
}
.footer{
width:auto
}
#right {
margin: auto;
width: 100%;
display: block;
}
#left{
width: auto;
margin-top:auto;
}
.container-contact{
width: auto;
}
#contactinfo{
width: auto;
margin: auto;
margin-bottom: 0px;
padding: 10%
}
#map{
width:85%;
margin:auto;
margin-bottom:20px;
}
.acte-necesare{
padding-bottom: 20px
}
}<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="geo.region" content="RO-IL">
<title>Legislatie</title>
<link rel="icon" href="images/favicon.ico">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700,800" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:30px; margin-left:8px; margin-right:8px">
<div class="main-box">
<header><img src="images/header.png" style="display:block">
</header>
<nav>
<ul>
<li><a href="index.html" target="_self" style="font-size:13.6px">Despre noi</a></li>
<li><a href="cursuri-auto-pret.html" target="_self" style="font-size:13.6px">Cursuri auto / Pret</a></li>
<li><a class="active" href="#portrait" style="font-size:13.6px">Legislatie</a></li>
<li><a href="acte-necesare.html" target="_self" style="font-size:13.6px">Acte necesare</a></li>
<li><a href="contact.html" target="_self" style="font-size:13.6px">Contact</a></li>
</ul>
</nav>
<div class="container-accordion">
<div id="titlu">INDICATOARE RUTIERE</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="color: #204a65; font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 95%">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">A. INDICATOARE DE AVERTIZARE</a>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-content">
<table class="table-indicatoare">
<tr>
<td><img src="indicatoare/avertizare/a1.jpg"><br/>Curba la stanga</td>
<td><img src="indicatoare/avertizare/a2.jpg"><br/>Curba la dreapta</td>
<td><img src="indicatoare/avertizare/a3.jpg"><br/>Curba dubla sau o succesiune de mai mult de doua curbe, prima la stanga</td>
<td><img src="indicatoare/avertizare/a4.jpg"><br/>Curba dubla sau o succesiune de mai mult de doua curbe, prima la dreapta</td>
<td><img src="indicatoare/avertizare/a5.jpg"><br/>Curba deosebit de periculoasa</td>
</tr>
<tr>
<td><img src="indicatoare/avertizare/a6.jpg" style="width: 60%"><br/>Panouri succesive pentru curbe deosebit de periculoase</td>
<td><img src="indicatoare/avertizare/a7.jpg"><br/>Coborare periculoasa</td>
<td><img src="indicatoare/avertizare/a8.jpg"><br/>Urcare cu inclinatie mare</td>
<td><img src="indicatoare/avertizare/a9.jpg"><br/>Drum ingustat pe ambele parti</td>
<td><img src="indicatoare/avertizare/a10.jpg"><br/>Drum ingustat pe partea dreapta</td>
</tr>
<tr>
<td><img src="indicatoare/avertizare/a11.jpg"><br/>Drum ingustat pe partea stanga</td>
<td><img src="indicatoare/avertizare/a12.jpg"><br/>Acostament periculos</td>
<td><img src="indicatoare/avertizare/a13.jpg"><br/>Drum aglomerat</td>
<td><img src="indicatoare/avertizare/a14.jpg"><br/>Tunel</td>
<td><img src="indicatoare/avertizare/a15.jpg"><br/>Pod mobil</td>
</tr>
<tr>
<td><img src="indicatoare/avertizare/a16.jpg"><br/>Iesire spre un chei sau mal abrupt</td>
<td><img src="indicatoare/avertizare/a17.jpg"><br/>Drum cu denivelari</td>
<td><img src="indicatoare/avertizare/a18.jpg"><br/>Denivelare pentru limitarea vitezei</td>
<td><img src="indicatoare/avertizare/a19.jpg"><br/>Drum lunecos</td>
<td><img src="indicatoare/avertizare/a20.jpg"><br/>Improscare cu pietris</td>
</tr>
<tr>
<td><img src="indicatoare/avertizare/a21.jpg"><br/>Caderi de pietre</td>
<td><img src="indicatoare/avertizare/a22.jpg"><br/>Presemnalizare trecere de pietoni</td>
<td><img src="indicatoare/avertizare/a23.jpg"><br/>Copii</td>
<td><img src="indicatoare/avertizare/a24.jpg"><br/>Biciclisti</td>
<td><img src="indicatoare/avertizare/a25.jpg"><br/>Animale</td>
</tr>
<tr>
<td><img src="indicatoare/avertizare/a26.jpg"><br/>Animale</td>
<td><img src="indicatoare/avertizare/a27.jpg"><br/>Lucrari</td>
<td><img src="indicatoare/avertizare/a28.jpg"><br/>Semafoare</td>
<td><img src="indicatoare/avertizare/a29.jpg"><br/>Aeroport</td>
<td><img src="indicatoare/avertizare/a30.jpg"><br/>Vant lateral</td>
</tr>
<tr>
<td><img src="indicatoare/avertizare/a31.jpg"><br/>Circulatie in ambele sensuri</td>
<td><img src="indicatoare/avertizare/a32.jpg"><br/>Alte pericole</td>
<td><img src="indicatoare/avertizare/a33.jpg"><br/>Accident</td>
<td><img src="indicatoare/avertizare/a34.jpg"><br/>Intersectie de drumuri</td>
<td><img src="indicatoare/avertizare/a35.jpg"><br/>Intersectie cu un drum fara prioritate</td>
</tr>
<tr>
<td><img src="indicatoare/avertizare/a36.jpg"><br/>Intersectie cu un drum fara prioritate</td>
<td><img src="indicatoare/avertizare/a37.jpg"><br/>Intersectie cu un drum fara prioritate</td>
<td><img src="indicatoare/avertizare/a38.jpg"><br/>Intersectii cu drumuri fara prioritate, decalate</td>
<td><img src="indicatoare/avertizare/a39.jpg"><br/>Intersectii cu drumuri fara prioritate, decalate</td>
<td><img src="indicatoare/avertizare/a40.jpg"><br/>Presemnalizare intersectie cu sens giratoriu</td>
</tr>
<tr>
<td><img src="indicatoare/avertizare/a41.jpg"><br/>Trecere la nivel cu o cale ferata cu bariere sau semibariere</td>
<td><img src="indicatoare/avertizare/a42.jpg"><br/>Trecere la nivel cu o cale ferata fara bariere</td>
<td><img src="indicatoare/avertizare/a43.jpg"><br/>Trecere la nivel cu linii de tramvai</td>
<td><img src="indicatoare/avertizare/a44.jpg"><br/>Masini si utilaje agricole<br/><br/></td>
<td><img src="indicatoare/avertizare/a45.jpg"><br/>Presemnalizarea unei amenajari rutiere care ofera si posibilitatea intoarcerii vehiculelor</td>
</tr>
<tr>
<td><img src="indicatoare/avertizare/a46.jpg"><br/>Baliza directionala care indica ocolirea obstacolului prin stanga</td>
<td><img src="indicatoare/avertizare/a47.jpg"><br/>Baliza directionala care indica ocolirea obstacolului prin dreapta</td>
<td><img src="indicatoare/avertizare/a48.jpg"><br/>Baliza bidirectionala<br/><br/></td>
<td><img src="indicatoare/avertizare/a49.jpg"><br/>Panouri suplimentare pentru trecerea la nivel cu calea ferata</td>
<td><img src="indicatoare/avertizare/a50.jpg"><br/>Panouri suplimentare la nodurile rutiere de pe autostrazi</td>
</tr>
<tr>
<td><img src="indicatoare/avertizare/a51.jpg"><br/>Trecere la nivel cu o cale ferata simpla, fara bariere</td>
<td><img src="indicatoare/avertizare/a52.jpg"><br/>Trecere la nivel cu o cale ferata dubla, fara bariere</td>
<td><img src="indicatoare/avertizare/a53.jpg"><br/>Trecere la nivel cu o cale ferata simpla fara bariere</td>
<td><img src="indicatoare/avertizare/a54.jpg"><br/>Trecere la nivel cu o cale ferata dubla fara bariere</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="color: #204a65; font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 95%">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">B1. INDICATOARE DE REGLEMENTARE - INDICATOARE DE PRIORITATE</a>
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-content">
<table class="table-indicatoare">
<tr>
<td><img src="indicatoare/prioritate/b1.1.jpg"><br/>Cedeaza trecerea</td>
<td><img src="indicatoare/prioritate/b1.2.jpg"><br/>Oprire</td>
<td><img src="indicatoare/prioritate/b1.3.jpg"><br/>Drum cu prioritate</td>
<td><img src="indicatoare/prioritate/b1.4.jpg"><br/>  Sfarsitul drumului cu prioritate </td>
<td><img src="indicatoare/prioritate/b1.5.jpg"><br/>  Prioritate pentru circulatia din sens invers</td>
</tr>
<tr>
<td><img src="indicatoare/prioritate/b1.6.jpg"><br/>  Prioritate fata de circulatia din sens invers</td>
<td colspan="4"></td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="color: #204a65; font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 95%">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">B2. INDICATOARE DE REGLEMENTARE - INDICATOARE DE INTERZICERE SAU RESTRICTIE</a>
</div>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-content">Placeholder</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="color: #204a65; font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 95%">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">B3. INDICATOARE DE REGLEMENTARE - INDICATOARE DE OBLIGARE</a>
</div>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-content">Placeholder</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="color: #204a65; font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 95%">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">C1. INDICATOARE DE ORIENTARE SI INFORMARE - INDICATOARE DE ORIENTARE</a>
</div>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-content">Placeholder</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="color: #204a65; font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 95%">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">C2. INDICATOARE DE ORIENTARE SI INFORMARE - INDICATOARE DE INFORMARE</a>
</div>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-content">Placeholder</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="color: #204a65; font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 95%">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse7">C3. INDICATOARE DE ORIENTARE SI INFORMARE - INDICATOARE DE INFORMARE TURISTICA</a>
</div>
</div>
<div id="collapse7" class="panel-collapse collapse">
<div class="panel-content">Placeholder</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="color: #204a65; font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 95%">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse8">D. PANOURI ADITIONALE</a>
</div>
</div>
<div id="collapse8" class="panel-collapse collapse">
<div class="panel-content">Placeholder</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="color: #204a65; font-family: 'Open Sans', sans-serif; font-weight:700; font-size: 95%">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse9">E. INDICATOARE RUTIERE TEMPORARE</a>
</div>
</div>
<div id="collapse9" class="panel-collapse collapse">
<div class="panel-content">Placeholder</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<br>Copyright © Cristina Bendorfean 2017-2018
<br>
<br>
</footer>
</body>
</html>
请记住，这只是我的第二个项目，我做的第一个项目是相当基础的。
1 个答案:
答案 0 :(得分：0)
您需要进行以下更改：
的style.css：
.main-box {
margin: auto;
background-color: #fff;
}
还要为每个表添加表响应属性。我为你的一个div和table做过：
<div class="panel-content table-responsive">
<table class="table-indicatoare table">
此外，您需要在HTML页面中添加导航栏，以便在移动设备中呈现页面时使其看起来更好，否则看起来很奇怪。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？