javascript - 为什么导航栏会扩展到整个移动设备的宽度？-6ren

javascript - 为什么导航栏会扩展到整个移动设备的宽度？

转载作者：太空宇宙更新时间：2023-11-04 07:33:22

通过在代码开头添加更多代码来编辑问题为什么导航栏会扩展到整个移动设备的宽度？抱歉我的写作方式，我必须使用翻译器。您好，我在一个带有价目表的网站上有此表格。好吧，当你在移动设备上看到它时，所有的内容都向右扩展，迫使你滚动，扩大屏幕，而不是看着它，一段一段地往下看。我有两个相同的页面，另一个完美运行，因为我没有在代码中显示的“价格样式”，所以我认为问题将来自这里，更具体地说是来自导航栏，因为在设备中它是延伸穿过的。我不知道为什么在这个页面上导航栏会扩展，特别是它扩展到链接按钮的宽度，甚至是另一个页面上的另一种颜色。这个错误会导致什么？我不知道是否应该显示其他代码，但我将其上传到服务器，但我看到没有其他样式的错误。

/* new styles*/
.navbar {
    margin-bottom: 0;
}

.navbar-brand {
    font-weight: 700;
}


.navbar-brand:focus {
    outline: 0;
}

.nav.navbar-nav {
    background-color: rgba(255,255,255,.6);
}

.navbar-custom.top-nav-collapse .nav.navbar-nav {
    background-color: rgba(0,0,0,0);
}


.navbar-custom ul.nav li a {
	font-size: 16px;
	letter-spacing: 1px;
    color: #444;
	text-transform: uppercase;
	font-weight: 700;
}

.navbar-custom.top-nav-collapse ul.nav li a {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	color: #fff;
}

.navbar-custom ul.nav ul.dropdown-menu {
	  border-radius: 0;	
	margin-top: 21px;
	border-top: none;
}

.navbar-custom ul.nav li a:hover ul.dropdown-menu {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}


.navbar-custom ul.nav ul.dropdown-menu li {
	border-bottom: 1px solid #f5f5f5;

}

.navbar-custom ul.nav ul.dropdown-menu li:last-child{
	border-bottom: none;
}

.navbar-custom ul.nav ul.dropdown-menu li a {
	padding: 10px 20px;
}

.navbar-custom ul.nav ul.dropdown-menu li a:hover {
	background: #fefefe;
}

.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
	color: #666;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}

.navbar-toggle {
    padding: 4px 6px;
    font-size: 14px;
    color: #fff;
}

.navbar-toggle:focus,
.navbar-toggle:active {outline: 0;}

#container-2{
	background-color: #EBB250;
}
.home-section {
    padding-top: 20px;
    padding-bottom: 20px;
	display:block;
    position:relative;
	z-index:120;
	
}
.home-section2 {
    padding-top: 0px;
    padding-bottom: 20px;
	display:block;
    position:relative;
    z-index:120;
}

.inner-section {
    padding-top: 110px;
    padding-bottom: 110px;
}


.home-section.nopadd-bot {
    padding-bottom: 0;
}


.section-heading h2 {
	font-size: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.section-heading p {
	font-weight: 300;
	font-size: 20px;
	line-height: 1.6em;
}
@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }
    .top-nav-collapse {
        padding: 0;
        background-color: #000;
    }

    .navbar-custom.top-nav-collapse {
        border-bottom: 1px solid rgba(255,255,255,.3);
    }
	
    .intro {
        height: 100%;
        padding: 0;
    }

    .brand-heading {
        font-size: 100px;
    }	
    .intro-text {
        font-size: 25px;
    }
}
@media (max-width:768px) {
	#navigation {
		padding: 20px 0;
	}
	.site-logo{
		margin: 0 0 0 30px;
		float:none;
	}
	.navbar-custom ul.nav li a {
		color: #eee;
	}
	.navbar-custom ul.nav ul.dropdown-menu li {
		border-bottom: 1px solid #aaa;

	}
	.navbar-header {
		margin-top:-40px;
		padding:0;
	}
	.navbar-header button {
		background: #111;
	}
	
	.navbar-header button.navbar-toggle {
		padding: 4px 15px;
		font-size: 14px;
		color: #fff;
	}
	
	.navbar-custom .nav {
		background: #444;
	}
	
	.service-box {
		margin-bottom: 50px;
	}
	
	.team-wrap {
		margin-bottom: 30px;
	}
	
	form#contact-form {
		margin-bottom: 50px;
	}
	
	.xs-marginbot-20 {
		margin-bottom: 20px;
	}

}

@media (max-width:480px) {

	.navbar-custom .nav.navbar-nav {
    background-color: rgba(255,255,255,.4);
	}
	
	.navbar.navbar-custom.navbar-fixed-top {
		margin-bottom: 30px;
	}
}

.navbar .navbar-custom {
	padding: 0;
}
    
    
    
/* estilos del formulario*/
@media  only screen and (min-device-width: 768px) 
{
    .form-container {
      padding: 5%;
      background: #ffffff;
      border: 9px solid #f2f2f2;            
      max-width: 520px;
      margin: auto;
    }

}

h1, p 
{
  text-align: center;
}

input, textarea , button
{
  width: 100%;
}    
textarea
{
  height: 200px;
}
button{
	background-color: #3bbec0 !important;
}

/* estilos de la pagina */

@import "grid.css";
@import "reset.css";
@import "font-awesome.css";
@import "superfish.css";

@import url(//fonts.googleapis.com/css?family=Dosis:400);
@import url(//fonts.googleapis.com/css?family=Dosis:700);

@import url(//fonts.googleapis.com/css?family=Denk+One);

@import url(//fonts.googleapis.com/css?family=Open+Sans:400);
@import url(//fonts.googleapis.com/css?family=Open+Sans:300);
@import url(//fonts.googleapis.com/css?family=Open+Sans:600);
@import url(//fonts.googleapis.com/css?family=Open+Sans:700);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400italic);
html {
    width: auto;

}
a[href^="tel:"] {
 color: inherit;
 text-decoration: none;
}

* {
    -webkit-text-size-adjust: none;
}

body {
    position: relative;
    background-color: #fff;
    color: #908e8e;
    font: 14px/20px 'Open Sans', sans-serif;
}

#container .column {
    /*position: relative !important;*/
    padding-top: 0px !important ;
  }

#works{
	background-color: #A4EB8F;
	padding-top: 10px ;
	padding-bottom: 30px ;
	
}
#works p{
	font-size: 20px ;
}

#informacion h2{
    padding-top: 10px ;
}

.ic {
	border:0;
	float:right;
	background:#fff;
	color:#f00;
	width:50%;
	line-height:10px;
	font-size:10px;
	margin:-220% 0 0 0;
	overflow:hidden;
	padding:0
}

strong {
    font-weight: 700;
}

address {
    font-style: normal;
}

p {
    margin-bottom: 20px;
}

.p1 {
    margin-bottom: 24px;
}

input {
    border-radius: 0 !important;
    outline: none !important;
}

img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    color: #474343;
    font-weight: normal;
    font-family: 'Denk One', sans-serif;
}

h2 {
    font-size: 60px;
    line-height: 60px;
    padding-top: 83px;
    margin-bottom: 40px;
    text-align: center;
}

h2.head1 {
    font-size: 48px;
    padding-top: 99px;
}

h3  {
    padding-top: 69px;
    margin-bottom: 30px;
    font: 30px/43px 'Dosis', sans-serif;
}

.page1 h3 {
    padding-top: 98px;
    margin-bottom: 15px;
}

h4 {
    font-size: 24px;
    line-height: 40px;
    padding-top: 70px;
    margin-bottom: 34px;
}

h4.head1 {
    padding-bottom: 0px;
    margin-bottom: 30px;
}

h4.head2 {
    padding-bottom: 0px;
    margin-bottom: 14px;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.list .count {
    margin-top: 4px;
    color: #fff;
    font: 30px/48px 'Dosis', sans-serif;
    width: 49px;
    float: left;
    margin-right: 11px;
    text-align: center;
    height: 49px;
    border-radius: 500px;
    background-color: #25952a;
}

.list li {
    overflow: hidden;
}

.list li+li {
    margin-top: 35px;
}

.list1 {
    margin-top: -3px;
}

.list1 li {
    position: relative;
}

.list1 li+li {
    margin-top: 10px;
}

.list1 li a:after {
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    background-color: #c7c6c6;
    height: 1px;
}

.list1 li a:hover:after {
    background-color: #25952a;
    width: 0;
}

.list2  {
    margin-top: -4px;
}

.list2 li {
    background: url(../img/dots.png) 0 72% repeat-x;
    overflow: hidden;
}

.list2 li+li {
    margin-top: 16px;
}

.list2 .prod {
    float: left;
    padding-right: 3px;
    background-color: #fff;
}

.list2 .price {
    padding-left: 3px;
    float: right;
    background-color: #fff;
}

.list2  {
    overflow: hidden;
}

a{
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

.btn  {
    margin-top: 73px;
    color: #fff;
    display: inline-block;
    padding: 22px 62px 24px;
    background-color: #25952a /*#3da9b6*/;
    font: bold 30px/40px 'Dosis', sans-serif;
}

.btn:hover {
    background-color: #1d1d1d;
}

.link1 {
    display: inline-block;
    margin-top: 16px;
    font: 24px/26px 'Dosis', sans-serif;
    color: #3b3a3a;
}

.paeg1 .link1 {
    margin-top: 14px;
}

.mb__0 {
    margin-bottom: 0px !important;
}
.m0 {
    margin: 0 !important;
}
.pad0 {
    padding: 0 !important;
}

.img_inner {
    max-width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 25px;
}
.fleft {
    float: left;
    width: auto !important;
    margin-right: 30px;
    margin-bottom: 0px;
    margin-top: 4px;
}

.page1 .fleft {
    margin-top: 8px;
}

.rel {
    position: relative;
}


.oh {
    overflow: hidden;
}
.fright {
    float: right !important;
}
.upp {
    text-transform: uppercase;
}

.alright {
    text-align: right;
}
.center {
    text-align: center;
}
.wrapper, .extra_wrapper {
    overflow: hidden;
}
.clear {
    float: none !important;
    clear: both;
}

.oh {
    overflow: hidden;
}

.nowrap {
    white-space: nowrap;
}


.page1 header h1{
    padding-bottom: 45px;
}
.content {
    padding-bottom: 10px;
    padding-top: 0%;
    margin-top: 0%;
}

.page1 .content {
    padding-bottom: 36px;
}

.text1 {
    color: #6a6a6a;
    margin-top: -21px;
    font: 20px/22px 'Dosis', sans-serif;
    margin-bottom: 26px;
}

.ban_img {
    margin-bottom: 39px;
}
.link22{
    color: #844007;
}

.links a {
    text-decoration: underline;
}

.links li+li {
    margin-top: 10px;
}
.box {
    color: #fff;
    text-align: center;
    display: block;
    background-color: #79c4ca;
    font: 36px/43px 'Dosis', sans-serif;
    margin-bottom: 25px;
}

.box:hover {
    background-color: #1d1d1d;
}

.box_bot  {
    padding-top: 63px;
    padding-bottom: 69px;
}

.box_bot span {
    margin-top: 3px;
    display: block;
    font-size: 30px;
}

.block1 {
    overflow: hidden;
}

.block1+.block1 {
    padding-top: 40px;
}

.sep__1 {
    border-top: 1px solid #d9d9d9;
}

.sep__2 {
    padding-top: 77px;
    border-bottom: 1px solid #d9d9d9;
}

.sep__3 {
    height: 92px;
}
.color1 {
    color: #25952a/*#3da9b6*/;
    font-size: 15px;
}

.color1 a:hover, a.color1:hover {
    color: #474343;
}

.color2 {
    color: #474343;
}

.td_und {
    text-decoration: underline;
}

.top {
    margin-bottom: 61px;
    display: inline-block;
    background: url(../images/totop.png) 0 0 no-repeat;
    width: 82px;
    height: 82px;
    transition: 0s ease;
    -o-transition: 0s ease;
    -webkit-transition: 0s ease;
}

.top:hover {
    background-position: right 0;
}

.copy {
    font-size: 12px;
    line-height: 18px;
}

.sub_copy {
    margin-top: -4px;
}

body {
    min-width: 1200px;
  }
  .container_12 {
      margin-left: auto;
      margin-right: auto;
      width: 1200px;
  }
  .grid_1,
  .grid_2,
  .grid_3,
  .grid_4,
  .grid_5,
  .grid_6,
  .grid_7,
  .grid_8,
  .grid_9,
  .grid_10,
  .grid_11,
  .grid_12 {
      display:inline;
      float: left;
      position: relative;
      margin-left: 15px;
      margin-right: 15px;
      
  }
  .grid_4 li{
      font-size: 16px;
  }

  .grid_4 p{
    font-size: 16px;
}
  
  .push_1, .pull_1,
  .push_2, .pull_2,
  .push_3, .pull_3,
  .push_4, .pull_4,
  .push_5, .pull_5,
  .push_6, .pull_6,
  .push_7, .pull_7,
  .push_8, .pull_8,
  .push_9, .pull_9,
  .push_10, .pull_10,
  .push_11, .pull_11,
  .push_12, .pull_12 {
      position:relative;
  }
  .alpha {
      margin-left: 0;
  }
  
  .omega {
      margin-right: 0;
  }
  .container_12 .grid_4 {
      width:370px;
  }
   
  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  .clearfix:before,
  .clearfix:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  
  .clearfix:after {
    clear: both;
  }
  
  .clearfix {
    zoom: 1;
  }

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Agrochema</title>
	<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
	<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:700'>
	<link href="https://fonts.googleapis.com/css?family=Arima+Madurai|Cormorant+Upright|Farsan" rel="stylesheet" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
	<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">

	<div id="navigation">
		<nav class="navbar navbar-custom" role="navigation">
			<div class="container">
				<div class="row">
					<div class="col-md-2">
						<div class="site-logo">
							<img id="logo" src="../img/logo.png" />
						</div>
					</div>
					<div class="col-md-10">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
								<i class="fa fa-bars"></i>
							</button>
						</div>
						<div class="collapse navbar-collapse" id="menu">
							<ul class="nav navbar-nav navbar-right">
								<li class="active">
									<a href="../index.html">Casa</a>
								</li>
								<li>
									<a href="../galerias.html#about">Sobre mi</a>
								</li>
								<li><a href="../galerias.html">Servicios</a></li>
									<a href="#works">Contacto</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</nav>
	</div>
	<section id="about" class="home-section color-dark bg-white">
		<div class="container marginbot-50">
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2">
					<div class="animatedParent">
						<div class="section-heading text-center animated bounceInDown">
							<h2 class="h-bold">Nues</h2>
							<div class="divider-header"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<section class="content">
			<div class="ic"></div>
			<div class="container_12">
				<div class="grid_8">
					<h4 class="head1">Revise nuestros precios</h4>
					<div class="grid_4 alpha">
						<p class="color1">Ponemos a su servicio nuestra larga experiencia y los materiales de primeras marcas. La mayor calidad, al menor precio...</p>
						<ul class="list2">
							<li>
								<div class="prod">
									<a>Mantenimiento mensual</a>
								</div>
								<div class="price">Desde 50€</div>
							</li>
							<li>
								<div class="prod">
									<a>Mantenimiento de comunidades</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de cesped *</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cesped artificial</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidado de setos</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidado de rosales</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantas ornamentales </a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Diseño de jardines</a>
								</div>
								<div class="price">Variable...</div>
							</li>

							<li>
								<div class="prod">
									<a>(*)En la plantación de césped natural, le ofrecemos un mes de mantenimiento gratuito, y asegurar su agarre y proliferación.</a>
								</div>
							</li>

						</ul>
					</div>
					<div class="grid_4 omega">
						<p class="color1">Limpieza y desbroce de fincas. Trabajos de campo, especialistas en huerta ecologica.</p>
						<ul class="list2">
							<br>
							<li>
								<div class="prod">
									<a>Sembramos su huerta</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidamos su huerta</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Arado de fincas</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Rotulamos las fincas</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de viñedos</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Siembras ecologicas</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de frutales</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<div class="grid_4">
				<p class="color1">
						<a href="#">Venta de leña, amplia variedad...</a>
					</p>
					<br>
					<p class="color1">
						<a href="#">Servicio de portes </a>
					</p>
					<p class="p1">En Agrochema</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="sep__2"></div>
			<div class="container_12">
				<div class="grid_4">
					<h3>Trabajos en madera</h3>
					<ul class="list2">
						<li>
							<div class="prod">
								<a>Vallados en madera</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>

						<li>
							<div class="prod">
								<a>Porches de madera</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>Pèrgolas de madera</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>Cabañas para herramienta</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>Casetas de animales</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>(*)Toda la madera que utilizamos es de primera calidad, tratada para aguantar el paso de los años y las inclemencias
									meteorológicas.
								</a>
							</div>
							<!--<div class="price">$80,22</div>-->
						</li>
					</ul>
				</div>
				<div class="grid_4">
					<h3>Nuestro compromiso</h3>
					<ul>
						<li>
							<a>Fiabilidad, innovación y determinación son los valores sobre los que se fundamenta nuestra empresa, el trabajo diario,
								las relaciones con los clientes y en la forma de hacer nuestro trabajo. Los equipos de trabajo nos unen, garantizando
								así que conocimientos y experiencias se compartan y se apliquen en toda las labores; todo ello redunda en nuestros
								clientes. Estos valores son los que nos orientan a implementar constantes mejoras en nuestros productos y a ofrecer
								un buen servicio a nuestros clientes. Viviendo como nuestros estos valores, logramos nuestros objetivos, facilitando
								la tarea de nuestros clientes, trabajadores y al conjunto del sector.
							</a>
						</li>
						<!--<li>
							<a>Expecialistas en jardineria, podas, etc... </a>
						</li>
						<li>
							<a>Expecialistas en jardineria, podas, etc.... </a>
						</li>
						<li>
							<a>Expecialistas en jardineria, podas, etc...</a>
						</li>
						<li>
							<a>Expecialistas en jardineria, podas, etc... </a>
						</li>
						<li>
							<a>Expecialistas en jardineria, podas, etc...</a>
						</li>
						<li>
							<a>Expecialistas en jardineria, podas, etc...</a>
						</li>-->
					</ul>
				</div>

				<div class="grid_4">
					<h3>Nuestros objetivos</h3>
					<p>Nuestro objetivo.</p>
				</div>
				<div class="clear"></div>
			</div>
		</section>
	</section>
	<section id="works">
		<div class="container">
			<div class="row">
				<div class="text-center col-md-5 col-sm-12 col-xs-12" id="informacion">
					<p>05400 Arenas de San Pedro</p>
					<p>(Avila)</p>
				</div>

				<div class="col-md-7 col-sm-12 col-xs-12" id="form_container">
					<script src='https://www.google.com/recaptcha/api.js'></script>
					<h5>
						Contacte conmigo
					</h5>
					<form method="post" id="reused_form">
						<label for="name">Nombre:</label>
						<input id="name" type="text" name="Name" required maxlength="50" placeholder="Nombre...">
						<label for="email">Email :</label>
						<input id="email" type="email" name="Email" required maxlength="50" placeholder="Correo electronico...">
						<label for="message">Mensage:</label>
						<textarea id="message" name="Message" rows="10" maxlength="6000" required></textarea>
						<div class="g-recaptcha" data-sitekey="6LfMA0sUAAAAALFN5W-V06LOOeWEUf7T2hVlt5Yu"></div>
						<button class="button-primary" type="submit">Enviar</button>

					</form>
					<div id="success_message" style="display:none">
						<h3>¡¡ El mensaje se envió con éxito...!!</h3>
						<p>Nos pondremos en contacto con usted pronto. </p>
					</div>
					<div id="error_message" style="width:100%; height:100%; display:none; ">
						<h3>Error</h3>Lo sentimos, hubo un error al enviar su formulario.</div>
				</div>
			</div>
		</div>
	</section>
	<section id="contact" class="home-section nopadd-bot color-dark bg-gray text-center">	
	</section>
	<footer>
		<div id="container">
			<div class="column col-md-4">
			</div>
			<div class="column col-md-4">			
			</div>
		</div>
	</footer>
</body>
</html>

最佳答案

您可能需要对其进行修改以使其完全符合您的要求，但问题似乎出在 body 和 .container_12 上设置的宽度。

您可以将正文设置为最大宽度，并从 .container_12 中删除宽度:

body {
    max-width: 1200px;
  }
  .container_12 {
      margin-left: auto;
      margin-right: auto;
  }

除非您希望正文达到 100%，否则需要根据需要对其进行进一步编辑。

此外，您的媒体查询引用了类 .form_container，但 HTML 将其作为 ID #form_container。

关于javascript - 为什么导航栏会扩展到整个移动设备的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49182003/

文章推荐： javascript - Google reCAPTCHA float 通知未完全显示

文章推荐： java - 如何在 Eclipse 中配置/运行 Ant Java 项目

文章推荐： java - 如何在 JAXB 中设置返回集合的 WrapperElement 名称？

文章推荐： html - css grid children 越过网格边界

java - 当后端进程运行时如何显示进度消息/栏？
我使用 Runtime.getRuntime().exec 来运行 perl 程序。现在我想在执行过程中显示百分比进度条，然后在perl程序执行完成后，它应该关闭进度条。我该怎么做？ Runtime.
html - 消失的导航链接/栏
我已广泛搜索该网站，但找不到答案。请我是新手，我需要你的帮助。我想创建一个固定的导航栏，但每次在我的 CSS 样式表中放置一个固定的规则时，导航栏都会消失。这是我的 html 代码:
右侧带有控件的 CSS 栏
Here's a nice jsFiddle illustrating the problem 我正在尝试创建一个标题栏元素... 永远只有 1 行高在右上角有始终存在的控件在左上角有一个标题，如
函数参数中的 C++ 栏
int fd = open(JOYSTICK_NAME, O_RDONLY | O_NONBLOCK); O_RDONLY 和 O_NONBLOCK 之间的栏是什么意思？我在 OpenGL/GLUT
html - 页面底部的空白/栏
我注意到我的网页在页脚之后和页面底部有一个空白/栏: 我试图通过使用 Chrome 中的 inspect 元素来查找此问题的原因，但找不到任何内容。我正在使用 Boostrap，这是我的页脚 HTML
Android透明状态栏和 Action 栏
我已经对这个主题进行了一些研究，但我找不到完整的解决方案，因此，我一步一步地尝试和错误，我终于找到了如何实现这些结果:透明或彩色Actionbar 和 Statusbar。请参阅下面的答案。最佳答案
javascript - 添加独立于类别的栏("reference"栏)
Highcharts 教程中的经典示例是: $(function () { $('#container').highcharts({ chart: { type: 'bar'
ios - 高度错误的模态 UINavigationController 栏
注意 :这与 iOS 13 中使用的新默认模态呈现样式无关。我有一个奇怪的问题，显示模态 UINavigationController . 考虑一个 UIViewController位于 UINav
javascript - 如何在页面加载时隐藏 iPad 栏？
我需要帮助了解如何在加载页面时隐藏 iPad 地址栏或顶部的整个地址栏。我正在开发基于在线客户管理系统的系统，需要隐藏 iPad 地址栏，因为它在查看网站时会占用大量空间。问候涡流已经尝试了以下
javascript - 将文本添加到 d3 栏
我在向栏中添加文本时遇到了一些问题。我想在栏上方显示值，但我无法向每个栏添加文本。现在我的dom结构是: g rect rect rect 我想要什么: g g.bar rect
c# - 如何修改 ListView 栏？
我有 ListView ，数据将从数据表显示在 ListView 中像这样我已经完成了但是我在数据行 6 有问题 dt = classes.xxxxx.GetData(sql,
javascript - 右对齐 Highcharts 栏
我使用 opposite 属性将 xAxis 向右移动。条形图怎么可能也从右侧开始？谢谢! Highcharts.chart('absoluteInterruptions', { chart:
iphone - 使图像适合 UINavigationBar 栏
我得到了这张图片，我想在我的导航 Controller 中使用它: 我是这样设置的(根据 this 问题的建议): UINavigationBar *theBar = self.navigationC
java - 代码上方的 Eclipse 栏
这个问题在这里已经有了答案: How to disable breadcrumbs in Eclipse (11 个答案) 关闭 9 年前。有谁知道如何删除我在 Eclipse 中用红色圈出的栏？
ios - 尝试仅允许某些字符串进入 URL 栏
总而言之，我的应用程序中有一个浏览器，我希望它只启动 5 个网站，仅此而已。有没有办法让我的浏览器通过设置自定义字符串来启动 5 个网站，例如 if {用户键入此字符串} 转到该网站，然后 else
ios - 过程中的 UIProgressView 栏
我想在我的应用程序中实现一个进度条。发生的过程是应用程序将一个目录复制到 iOS 文档目录中。通常需要 7-10 秒(iPhone 4 测试)。我对进度条的理解是你在事情发生时更新进度条。但是根据目录
javascript - 交互式 JavaScript 栏
我正在寻找一种创建交互式子弹图的方法，它允许用户单击图中的任意位置并设置一个标记，然后根据该标记所在的位置计算一些简单的值。例如，我希望它看起来类似于: http://www.usrecordings
html - 普通和移动浏览器中图片后面的 Div 栏
我目前在一个网站上工作，我有一张人的照片。在图片的右侧，我想要名称和描述。名称应与描述具有不同的背景。我上传了一张它应该是什么样子的图片:http://www.tiikoni.com/tis/view
css - 试图居中顶部 DIV 栏
我将 div 栏设置为不滚动，因此它将始终显示在网站顶部。在这个栏内，我有另一个 div 框，里面有两个按钮，它们向右浮动，所以它们总是在右上角。问题是我希望按钮居中于页面的右上角而不是右上角。相反
css - 样式化

首页

博学

6Ren·AI

商城

javascript - 为什么导航栏会扩展到整个移动设备的宽度？