Discussion :

[M0h4m37]

Bonjour,

J'utilise bootstrap pour mes tableaux et je galère pas mal sur un truc...

Je vous montre mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="row" style="">
	<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 align-self-center">
		ceci est mon texte
	</div>
	<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 align-self-center">
		<div class="row align-items-end">
			<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 align-self-center>
				<a href="" target="_blank" rel="nofollow">
					<img src="images/logo1.png">
				</a>
			</div>
			<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 align-self-center">
				<a href="#" title="Share on Tweet" rel="nofollow">
					<img src="images/logo2.png">
				</a>
			</div>
		</div>
	</div>
</div>

Ce que je tente de faire, c'est en écran large, avoir quelque chose comme ça :

logo1
logo2

ceci est mon texte

et sur smartphone :

ceci est mon texte
logo1 logo2

mais avec mon code, en écran large no problème mais sur petit écran, j'ai

ceci est mon texte
logo1
logo2

Je trouve mon code logique, je comprends pas bien pourquoi ça ne marche pas... Est-ce que quelqu'un saurait ?

En vous remerciant.

[Toufik83]

Bonjour,

Avec Bootstrap version 5, tu peux utiliser la classe col

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="row" style="">
  <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 align-self-center">
    ceci est mon texte
  </div>
  <div class="row col-xs-2 col-sm-2 col-md-2 col-lg-2 align-self-center">
    <div class="col">
      <a href="" target="_blank" rel="nofollow">
        <img src="images/logo1.png" />
      </a>
    </div>
    <div class="col">
      <a href="#" title="Share on Tweet" rel="nofollow">
        <img src="images/logo2.png" />
      </a>
    </div>
  </div>
</div>

Est-ce le résultat voulu ?

[M0h4m37]

Merci Toufik, c'est parfaitement ce que je voulais ! Je ne savais pas qu'on pouvait mettre col et row dans la même class.

En tout cas, merci beaucoup, problème réglé !

Bonne journée !!