(Bootstrap) Probleme d'alignement avec bloc

Bonjour,

sur Bootsrap j'ai 2 blocks qui sont à l'horizontal, en "LG" (1024+) pas de soucis.

Lorsque je passe en 1024 ils se chevauchent* sans être bien centrés.

Le but seraient qu'ils se chevauchent* seulement au minimum en 768 et 768-.

Seriez-vous m'aiguiller sur la bonne façon de procéder svp ?

merci.

- EDIT - "chevauchent*", je voulais dire en mode "vertical", l'un sur l'autre.
Modifié par poilozorey (27 Jan 2015 - 00:12)

aurais tu un lien?

ou du code à nous montrer?

Désolé pour mon premier message qui manquait de cruellement de concret niveau "détails".
Malheureusement pas de lien à te proposer, c'est en local, en revanche voici déjà pour le code .

 
  <!-- Loop Bottom-Share -->
<div class="cat-post-bottom clearfix">
 <div class="first-loop col-lg-6">
 <img src="img/logo.jpg" alt="texte alternatif"/>
 </div>
 <div class="cat-post-share pull-left clearfix">
 <div class="panel panel-default">
 <div class="panel-heading"><h3 class="panel-title">Partagez sur les réseaux sociaux<i class="fa fa-user-plus pull-right"></i></h3></div>
 <div class="panel-body">
 <div class="list-group">
  <a href="*" class="list-group-item">Partager sur Facebook <i class="fa fa-facebook-square facebook pull-right"></i></a>
  <a href="*" class="list-group-item">Partager sur Google + <i class="fa fa-google-plus-square google-plus pull-right"></i></a>
  <a href="*" class="list-group-item">Partager sur Twitter <i class="fa fa-twitter-square twitter pull-right"></i></a>
  <a href="*" class="list-group-item">Envoyer par Email <i class="fa fa-envelope-square email pull-right"></i></a>
 </div>
 </div>
 </div>
 </div>
</div> <!-- End Loop Bottom-Share-->

Sur écran bureau large, à l'horizontale, ça donne ce que je souhaite :

http://img4.hostingpics.net/thumbs/mini_885282horizon.png

Mais le problème surgit dès "1024 et moins", alors qu'il y à largement la place pour qu’ils soient "cote à cote".
http://img4.hostingpics.net/thumbs/mini_2492991024.png

Cela fait quelques jours déjà que je cherche une solution, mais je tourne en rond désespérément.

- Edit - j'ai beau enlever la boucle du logo et dupliquer celle des réseaux sociaux, même résultat...
A l'horizontal sur écran large c'est nickel...et catastrophique dès 1024 et moins
Modifié par poilozorey (27 Jan 2015 - 01:47)

Salut,

Ton code manque d'un peu d'indentation pour etre plus clair !

<div class="cat-post-bottom clearfix">
	<div class="first-loop col-lg-6">
		<img src="img/logo.jpg" alt="texte alternatif"/>
	</div>
	<div class="cat-post-share pull-left clearfix">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">Partagez sur les réseaux sociaux<i class="fa fa-user-plus pull-right"></i></h3>
			</div>
			<div class="panel-body">
				<div class="list-group">
					<a href="*" class="list-group-item">Partager sur Facebook <i class="fa fa-facebook-square facebook pull-right"></i></a>
					<a href="*" class="list-group-item">Partager sur Google + <i class="fa fa-google-plus-square google-plus pull-right"></i></a>
					<a href="*" class="list-group-item">Partager sur Twitter <i class="fa fa-twitter-square twitter pull-right"></i></a>
					<a href="*" class="list-group-item">Envoyer par Email <i class="fa fa-envelope-square email pull-right"></i></a>
				</div>
			</div>
		</div>
	</div>
</div>

Je ne connait pas précisément l'utilisation des grid de bootstrap mais déjà je peux voir que t'as une classe " col-lg-6" sans que la colonne suivante n'ait que classe correspondante... Regarde les exemples de la doc http://getbootstrap.com/css/#grid tu devrais arriver à un truc du genre :

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Toujours est-il que de faire 2 colonnes côte à côte et fluide n'est pas bien difficile ! Et je préfère avoir la main sur le code.. Hop un peu d'huile de coude et juste faire attention à ce que ton contenu (comme l'image) ne dépasse pas de son parent (comme je le suspecte) et ne pousse pas le reste..
Selon ce que tu veux faire ça peut suffire...

<div class="left">
	<img class="logo" src="http://cdn.alsacreations.net/css/img/logo-alsacreations-com-2014.png" alt="" />
</div><!-- Commentaire pour éviter les espaces insécables
--><div class="right">
	blabla
</div>

body{
    text-align:center;
}
.left,
.right{
	display:inline-block;
    vertical-align:top;
	width:50%;
	padding:20px;
	-webkit-box-sizing:border-box; /*pour que le padding n'influe pas sur la largeur finale */
	-moz-box-sizing:border-box;
	box-sizing:border-box;
    text-align:center;
    max-width:500px;
}
.left{
    background-color:#880000;
}
.right{
    background-color:#008800;
}
	.logo{
		max-width:100%;
	}

en fiddle : http://jsfiddle.net/Undless/Lto38bb1/

Bonjour _laurent,

Encore une fois merci de te préoccuper de mon cas.

Je te "jette une réponse" sans encore avoir tester le code, mais à vue de nez il semblerait qu'un problème surgisse à ta solution proposée ci-dessus.

C'est en rapport avec les petites résolutions par exemple, 480 et moins.
(je m'aide de la console F12 de google chrome)
Il semblerait qu'avec ton code, que les blocs ne se chevauchant plus (ne passent plus l'un sur l'autre)

Mais je n'ai pas encore tester et vais le faire dès que possible.

Yooops j'avais loupé ta phrase "Le but seraient qu'ils se chevauchent seulement au minimum en 768 et 768-."
Du coup placer des media-queries qui vont changer le positionnement en dessous de 768px :

@media (max-width: 1100px) {
  .left,
  .right{
    display:block;
    width:100%;
    max-width:100%;
  }
}

http://jsfiddle.net/Undless/Lto38bb1/1/



Mais si tu regarde la doc bootstrap, si tu construis bien ta grid selon l'exemple tout doit être géré, c'est fait pour ça :

http://getbootstrap.com/css/#grid-example-basic

Bootstrap a écrit :
Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>