0
このページは、デスクトップのデバイスやタブレットではうまく動作しますが、電話機ではうまく動作しません。ページの幅が画面の幅を超えているため、高さのみのスクロールを持つページを持つようにこの幅を応答させます。私は検索しているので私を助けてくださいが、何も動作するように見えません。私のブートストラップページは完全に幅応答していません
コードHTML：
<!DOCTYPE html>
<html>
<head>
<title>Contactos | LMSGI</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--ARCHIVOS CSS-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/css_contactos.css" type="text/css">
<!--FUENTES-->
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<!--ICONOS-->
<script src="https://use.fontawesome.com/0964eb85ca.js"></script>
</head>
<body class="bodybground">
<nav class="navbar navbar-static-top navbar-default navigationbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle menubutton" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Desplegar navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse navigationbar-collapsed">
<ul class="nav navbar-nav navbar-left navigationletters navbarcolors">
<li><a class="start" href="index.html"><i class="fa fa-home fa-lg" aria-hidden="true"></i> Inicio</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">JSON</a></li>
</ul>
<ul class="nav navbar-nav navbar-left dropdownacolor">
<li class="dropdown">
<a href="#" class="dropdown-toggle otherdd" data-toggle="dropdown">
MÁS<b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-left">
<li class="disabled"><a href="contactos.html">Sobre nosotros</a></li>
<li><a href="#">Bibliografía</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="jumbotron tittle">¿quiénes somos?</div>
<div class="container-fluid subtittle">
<div class="row">
<div class="col-md-2">
<img src="img/subtittle_icon.ico" class="img-rounded iconsubtittle">
</div>
<div class="col-md-5">
<p class="parraphtittle">Sobre el proyecto</p>
</div>
<div class="col-md-9 parraphrespon">
El proyecto consiste en una página que pueda enseñar a los lectores las nociones básicas sobre distintos lenguajes de programación web tales como HTML, CSS, JavaScript, etc. para que todos nuestros lectores realicen páginas utilizando las últimas tecnologías.
</div>
</div>
</div>
<div class="container-fluid containerteam">
<div class="row">
<div class="col-md-12">
<p class="teamtittle">Participantes</p>
<hr style="width: 30%; background-color: orange; height: 0.2em; margin-top: 0px;" />
</div>
</div>
</div>
<div class="container-fluid">
<div class="row firstrow">
<div class="col-md-4 avatarcol">
<img src="img/avatar.png" class="img-responsive center-block avatar1">
<p class="name">Jose Ruano</p>
</div>
<div class="col-md-4 avatarcol">
<img src="img/avatar.png" class="img-responsive center-block avatar1">
<p class="name">Daniel Sierra</p>
</div>
<div class="col-md-4 avatarcol">
<img src="img/avatar.png" class="img-responsive center-block avatar1">
<p class="name">Jesus Rodríguez</p>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 avatarcol2">
<img src="img/avatar.png" class="img-responsive center-block avatar2">
<p class="name">Sergio Ortega</p>
</div>
<div class="col-md-4 avatarcol2">
<img src="img/avatar.png" class="img-responsive center-block avatar2">
<p class="name">Jesús Villar</p>
</div>
<div class="col-md-2"></div>
</div>
</div>
<br>
<div class="container-fluid piepagina">
<footer class="footer">
<div class="container-fluid">
<p class="footertext">LMSGI | Página creada con fines académicos (1º DAM Curso 2016/2017) <a class="footerlinks" href="#">Visitar web del curso</a></p>
</div>
</footer>
</div>
</body>
</html>
コードCSS：
html {
height: 100%;
width: 100%;
}
.bodybground {
font-family: 'Roboto', sans-serif;
background-color: white;
width: 100%;
}
.navbar-brand.navtittle {
font-size: 1.1em;
font-weight: bold;
}
.otherdd {
font-weight: bold;
}
.jumbotron.tittle {
text-align: center;
font-size: 4.7em;
padding-bottom: 5%;
padding-top: 5%;
background: rgb(1, 163, 211);
font-weight: bold;
color: white;
font-family: 'Raleway', sans-serif;
margin-bottom: 0;
}
.navbar-default {
margin-bottom: 0;
background-color: rgb(20, 65, 108);
}
.navbar .nav.navbarcolors li a {
color: white;
}
.navbar-default.navigationbar {
border-color: rgb(20, 65, 108);
}
.subtittle {
font-family: 'Prociono', serif;
/*text-align: center;*/
font-size: 1.3em;
background-color: rgba(61, 104, 113, 0.15);
padding-top: 2%;
padding-bottom: 2%;
}
.iconsubtittle {
width: 100%;
height: 100%;
padding-left: 3%;
}
.parraphtittle {
font-size: 1.3em;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.teamtittle {
text-align: center;
padding-top: 1%;
font-family: 'Raleway', serif;
font-size: 3.7em;
margin-bottom: 0px;
}
.avatar1 {
max-width: 80%;
max-height: 80%;
padding-bottom: 3%;
}
.avatar2 {
max-width: 96%;
max-height: 96.5%;
padding-bottom: 3%;
}
.avatarcol2 {
padding-right: 4%;
padding-left: 4%;
}
.containerteam {
margin-bottom: 2%;
}
.name {
font-family: 'Roboto', sans-serif;
text-align: center;
font-size: 1.3em;
font-weight: bold;
}
.firstrow {
margin-bottom: 3%;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu {
background-color: rgb(26, 80, 132);
color:#ffffff;
}
.navbar-default .navbar-nav.dropdownacolor li a {
color: white;
}
.navbar-default .navbar-nav .open .dropdown-menu>li.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu {
color: rgb(46, 60, 73);
}
.navbar-default .navbar-nav.dropdownacolor li a:focus {
background-color: rgb(16, 47, 77);
color: white;
}
.navbar-default .navbar-nav.dropdownacolor li a:hover {
background-color: rgb(16, 47, 77);
color: white;
}
.navbar .nav.navbarcolors li a:hover {
background-color: rgb(16, 47, 77);
font-weight: bold;
}
.navbar .nav.navbarcolors li a.start {
font-size: 1.2em;
color: white;
font-weight: bold;
}
.piepagina {
background-color: rgb(20, 65, 108);
padding-top: 1%;
color: white;
padding-left: 0.1%;
}
.footertext {
font-size: 0.8em;
}
.footerlinks {
color: lightblue;
font-weight: bold;
}
.navbar-default .navbar-toggle.menubutton .icon-bar {
background-color: white;
}
.navbar-default .navbar-toggle.menubutton:active {
background-color: rgba(0,0,0,0.1);
}
.navbar-default .navbar-toggle.menubutton:focus {
background-color: rgba(0,0,0,0.3);
}
.navbar-default .navbar-toggle.menubutton:hover {
background-color: rgba(0,0,0,0.2);
}
.navbar-default div.navbar-collapse.navigationbar-collapsed {
border-top:none;
box-shadow:none;
}
@media(max-width: 991px) {
.iconsubtittle {
display: none;
}
}
@media(max-width: 880px) {
.avatar1 {
max-width: 40%;
max-height: 40%;
padding-bottom: 3%;
}
.avatar2 {
max-width: 42%;
max-height: 42%;
padding-bottom: 3%;
}
}
.container {
width: 100%;
}
感謝し、私はあなたが私に解決策をもたらす願っています;）