Responsive design avec les colonnes de bootsrap

Version imprimable

1 pièce(s) jointe(s)

j'ai fais mon code en utilisant les colonnes dans bootstrap

je veux que lorsque je minimise l'ecran l'affichage reste le même
cad image suivi d'un texte

voila mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="row">
    <div class="col-md-6">
        <a style="display: flex; margin: 10px; color: #000;" ng-click="openModalFiltre()">
            <img src="images/home/ic_filtre.png" class="imageMenu">
        </a>
    </div>
    <div class="col-md-6">
        <h2 class="textMenu">Filtra</h2>
    </div>
    </a>
</div>
<div class="row">
    <div class="col-md-6">
        <a style="display: flex; margin: 10px; color: #000;" ng-click="logout()">
            <img src="images/home/ic_import.jpg" class="imageMenu">
        </a>
    </div>
    <div class="col-md-6">
        <h2 class="textMenu">Logout</h2>
    </div>
    </a>
</div>

Pièce jointe 181242 : celle pour affichage de device PC

je veux que sur un tél l'affichage reste le même comment le faire??

22/06/2015, 19h35
NoSmoking

Bonjour,
même réponse ou presque que sur ton autre discussion
Commence par écrire du code correct et place ton CSS dans la partie style de ta page ou encore dans un feuille de style.
23/06/2015, 11h56
fidbell84

J'ai modifié le code déja. c'est pas la même discution, ici j'utilise les classes de bootstrap.
23/06/2015, 12h20
Invité

Bonjour,
peux-tu expliquer/justifier l'utilisation de display: flex; ? :koi:
23/06/2015, 12h46
fidbell84

J'ai déja supprimé. elle n 'a pas aucun rôle. mon prbléme c'est dans le classe:

Code:

<div class="col-md-6">

de bootstrap
23/06/2015, 18h55
NoSmoking
Citation:

mon prbléme c'est dans le classe

il te faut dans ce cas regarder si la classe que tu places sur ton élément est compatible avec ce que tu souhaites obtenir, à savoir si je ne m'abuse en résumé
Code:

1 2 3 4 5 6 7 8 .col-md-6 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; float: left; width: 50%; }
06/07/2015, 11h32
fidbell84

Bonjour,

J'ai trouvé la solution dans laquel je dois utilisé ces lasses pour différents taille d'écran:
col-md-
col-lg-
col-sm-
col-xs-

:)