bootstrap 4 - deux de mise en page colonne avec la seconde colonne pour afficher les détails en vue mobile

-1

bootstrap 4 - deux de mise en page colonne avec la seconde colonne pour afficher les détails en vue mobile

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous"> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-xs-12"> 
 
     <h1>Servers</h1> 
 
     <ul> 
 
      <li>server 1</li> 
 
      <li>server 2</li> 
 
      <li>server 3</li> 
 
     </ul> 
 
     </div> 
 
     <div class="col-md-6 col-xs-12"> 
 
     <h1>server details</h1> 
 
     <p class="lead">server 1 is online.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- /.container --> 
 

 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script> 
 

 

 
</body>

Je veux créer une amorce 2 mise en page de colonne. la première colonne à avoir une liste de serveurs. et la deuxième colonne pour avoir les détails du serveur. Lorsque aucun serveur n'est sélectionné - il affiche le nombre de serveurs en ligne, etc.

Sur la vue mobile - Je ne veux pas que la colonne 2 soit en dessous de la colonne colonne 1. Mais je veux que la colonne 2 soit masquée ou affichée (de droite à gauche). colonne 2 cachée aussi ok. Sur la vue mobile - la liste des serveurs est affichée et lorsque l'utilisateur clique sur un serveur, la vue doit passer à la colonne2 indiquant les détails du serveur. Je peux avoir les détails chargés/sur la colonne 2. rendu

Je colonnes que les classes suivantes:

colonne1 - col-md-6, col-sm-12

colonne2 - col-MD- 6, col-sm-12

quelqu'un pourrait-il me guider vers la bonne direction s'il vous plaît?

Source

2017-09-20 Shark N

s'il vous plaît me fournir le code html css –

https://getbootstrap.com/docs/4.0/utilities/display/ – Sergey

a ajouté le code html. –

Vous devez créer cela à partir de css. En utilisant les requêtes média Plongez les deux div avec différents ID ou noms de classe. Et,

@media only screen and (max-width:300px){ 
    .column2{ 
    display:none; 
    } 
}

Et cela cache la div, lorsque la largeur de l'écran de l'appareil est inférieure à 300px

Source

2017-09-20 19:55:27 kasun

bootstrap 4 - deux de mise en page colonne avec la seconde colonne pour afficher les détails en vue mobile

Répondre

Questions connexes