1

Estoy diseñando el Home de un sitio. Con thumbnail para articulo. La verdad es que estoy muy fresco en Css, pero imagino que alguna clase de bootstrap.css es la que me esta generando los espacios pero no he podido dar con ella

<div class="contenido">
		<section class="row">
			<div class="page-header">
  					
			</div>
			<h3><span class="label label-primary">Ultimas Novedades</span></h3>
				<article class=" col-xs-12 col-sm-6 col-md-9">			
					<div class="row">
					<div class="col-xs-12 col-sm-3 col-md-8">
						<div class="col-xs-12">
						    <a href="#" class="thumbnail">
						      <img src="/img/carousel/imagen-2.jpg" alt="...">
						      	<div class="caption">
        							<h3>Titulo del Articulo</h3>
        							<p>Resumen...</p>
        						</div>
						    </a>
						  </div>
					</div>
					<div class="col-xs-12 col-sm-3 col-md-4">
						<div class="row">
						  <div class="col-xs-12">
						    <a href="#" class="thumbnail">
						      <img src="/img/carousel/imagen-1.jpg" alt="...">
						      <div class="caption">
        							<p>Titulo</p>
        						</div>
						    </a>
						  </div>
						</div>
						<div class="row">
						  <div class="col-xs-12">
						    <a href="#" class="thumbnail">
						      <img src="/img/carousel/imagen-3.jpg" alt="...">
						      <div class="caption">
        							<p>Titulo</p>
        						</div>
						    </a>
						  </div>
						</div>
					</div>
					</div>
					<div class="row">
						<div class="page-header">
	  							<h4><span class="label label-primary">Lo mas visto</span></h4>
						</div>
						<!-- articulos por categoria -->
							@include('front.template.partials.art-cat')
					</div>
					<div class="row">
						<div class="page-header">
	  							<h4><span class="label label-primary">Atletismo</span></h4>
						</div>
						<!-- articulos por categoria -->
						@include('front.template.partials.art-cat')
					</div>
					<div class="row">
						<div class="page-header">
							<h4><span class="label label-primary">De nosotros</span></h4>
						</div>
						<!-- articulos por categoria -->
						@include('front.template.partials.art-cat')
					</div>
				</article>

				<aside class="visible-lg visible-md col-xs-12 col-sm-3 col-md-3">

					<div class="panel panel-default">
						  <div class="panel-body">
						  		<h4>Proximos Eventos<small> . <a href="#">Ver todos</a></small></h4>
						  		<p>
									Aca habra por renglon una fecha con el proximo evento. 
									Ademas presionandolo, se abrira con una pagina con el detalle Completo
								</p>

								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
						  </div>
						   <div class="panel-footer">
						   		<a href="#">Calendario Completo <span class="badge">42</span></a>

						   </div>
					</div>

					<div class="panel panel-default">
						  <div class="panel-body">
						  		<h4>Ranking:???</h4>

						  </div>
					</div>
					<div class="panel panel-default">
						  <div class="panel-body">
						  		<h4>Publicidades</h4>

						  </div>
					</div>
					<div class="panel panel-default">
						  <div class="panel-body">
						  		<b> &copy Lisandro Parera . 1toMany</b>

						  </div>
					</div>

					
					
				</aside>		
		</section>	
	</div>
					

Les dejo mi hoja de estilo:

body 
{ 
	padding-top: 50px;
	background-color: #f5f8fa;
}
.navbar{
	background-color: #FFFFFF !important;
	border-color: #95d6f0;
	color: #95d6f0 !important;
}

aside
{
  	width: 100%;
 	margin: 0 auto;
}

.contenido
{
	width: 95%;
 	margin: 0 auto;
}
.panel-body{
	padding: 10px;
	width: 100%;
	margin: 0 auto;
}

4
  • ¿Qué es "header-page" y "componentes"?
    – Shaz
    el 20 sep. 2016 a las 14:39
  • ahi edite. Entre fila y fila coloque un page-header con titulo de la categoria a la que pertenecen los articulos. que tambien me genera mas espacio.
    – Cidius
    el 20 sep. 2016 a las 14:48
  • Bien, a qué espacios te refieres exactamente en los thumbnails? el que hay entre la imagen y una especie de borde que está un poco separado?
    – Shaz
    el 20 sep. 2016 a las 14:58
  • 1
    A esta pregunta le falta código esencial dentro de la pregunta en sí. No añadas enlaces que van a cambiar y/o desaparecer en el futuro, pon el código directamente en la pregunta. Ve al centro de ayuda y lee cómo crear un ejemplo mínimo, completo y verificable.
    – Alvaro Montoro
    el 20 sep. 2016 a las 15:01

1 respuesta 1

0

Si te refieres a la clase img-thumbnail la cual añade como un marco pequeño a las fotos y luego un borde, solo tienes que modificar el css de dicha clase img-thumbnail

.img-thumbnail {
padding: 2px;
}

con 2px lo dejamos a la mitad, bootstrap tiene un padding de serie de 4px Luego llama a tu archivo css después de la llamada al css de bootstrap para que sobrescriba el estilo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.