HOla como estan?
Estoy probando Bootstrap3 e hice una pagina sencilla, el problema es que entre la barra de navegacion y el carrusel me aparece una linea blanca que quiero quitarle (supongo que es el margen)
Probe ponerle la propiedad padding-bottom a la barra de navegacion en 0px; y la de carrusel en 0px; para padding-top pero sigue ahi.
Tambien me surje el problema de que siempre me queda un scroll ala derecha sin importar el tama;o o resolucion de la pantalla
Alguna idea?
Código HTML:
!DOCTYPE html>
<html>
<head>
<title>Titulo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../fa/css/font-awesome.css" rel="stylesheet">
<script src="../jquery.js"></script>
<script src="../js/bootstrap.js"></script>
</head>
<body>
<!-- Barra de navegacion del sitio -->
<div class="navbar navbar-inverse" style="padding-bottom: 0px;">
<a class="navbar-brand" href="index.html">titulo</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="catalogo.php">opcion1</a></li>
<li><a href="contacto.php">opcion2</a></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" >opcion3 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">3a</a></li>
<li><a href="#">3b</a></li>
<li class="divider"></li>
<li><a href="#">3c</a></li>
</ul>
</li>
</ul>
<!-- Formulario de busqueda general en catalogo -->
<div>
<form class ="navbar-form navbar-right" role ="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search catalog">
</div>
<button type = "submit" class ="btn btn-default">
Search
</button>
</form>
</div>
</div> <!-- Div de fin de barra de navegacion -->
<!-- Carrusel con fotos de PROMO -->
<center>
<div id="myCarousel" class=" carousel" style="background-color: #000000; padding-top: 0px;" >
<!-- Indicadores para el carrusel -->
<ol class=" carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Items del carrusel -->
<div class="carousel-inner">
<div class="item active">
<img src="http://www.forosdelweb.com/f53/img/promo/1.jpg" alt="" width="630" height="360">
<div class="carousel-caption">
<h1>Titulo1s</h1>
<p>subtitulo1</p>
</div>
</div>
<div class="item">
<img src="http://www.forosdelweb.com/f53/img/promo/2.jpg" alt="" width="630" height="360">
<div class="carousel-caption">
<h1>Titulo2 </h1>
<p>SUbtitulos2</p>
</div>
</div>
<div class="item">
<img src="http://www.forosdelweb.com/f53/img/promo/3.jpg" alt="" width="630" height="360">
<div class="carousel-caption">
<h1>Titulo3 </h1>
<p>Subtitulo3</p>
</div>
</div>
</div><!-- Fin de lista de items del carrusel -->
<script>