Bootstrap 3 Spalten reagieren

Wie kann ich dies im Bootstrap erreichen. Ich habe eine 3 Spalte und möchte 3 Spalten bleiben, sei es auf dem Handy oder Desktop.Bootstrap 3 Spalten reagieren

<div class="container"> 
    <div> 
     <h1>Example - 3 column div</h1> 
     <div class="row"> 
      <div class="col-xs-6 col-sm-4">First</div> 
      <div class="col-xs-6 col-sm-4">Second</div> 
      <div class="col-xs-6 col-sm-4">Third</div> 
     </div> 
</div>

auf Desktop

First | Second | Third

auf mobiles es wie diese

First | Second 
| Third

ich dies zu erreichen, auf Desktop-und mobilen

First | Second | Third

Hier sind die Geigen wollen werden - >https://jsfiddle.net/y28ugzp6/

Quelle

2017-03-28 Shafiq Mustapa

ändern Klassen 'col-xs-4 col-sm-4' - eigentlich könnten Sie einfach tun ' col-xs-4', da dies dann für jede Größe funktioniert - auch wenn du vielleicht lesen möchtest, was diese Klassen eigentlich bedeuten und dann hättest du dich leicht selbst beantworten können. Ich denke –

benutze einfach 'col-xs-4' für jede Spalte. – MUT

xs-6 bedeutet auf extra klein nehmen Sie 50% Breite, und äußere div Breite ist immer 100%, so wird es in 2 Teile automatisch aufgeteilt, so xs-4 ist in Ordnung für Sie –

Set alle Klassen des div auf col-xs-4:

<div class="col-xs-4">First</div> 
<div class="col-xs-4">Second</div> 
<div class="col-xs-4">Third</div>

Quelle

2017-03-28 08:56:34 Arkej

ein Verwenden Sie einfach Klasse col-xs-4.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container"> 
 
    <div> 
 
     <h1>Example - 3 column div</h1> 
 
     <div class="row"> 
 
      <div class="col-xs-4 ">First</div> 
 
      <div class="col-xs-4">Second</div> 
 
      <div class="col-xs-4">Third</div> 
 
     </div> 
 
</div>

Quelle

2017-03-28 08:57:36 neophyte

Besser ist #Arkej.

Aber Sie können auch wie folgt tun:

<div class="container"> 
     <div> 
      <h1>Example - 3 column div</h1> 
      <div class="row"> 
       <div class="col-xs-4 col-md-4 col-sm-4">First</div> 
       <div class="col-xs-4 col-md-4 col-sm-4">Second</div> 
       <div class="col-xs-4 col-md-4 col-sm-4">Third</div> 
      </div> 
     </div> 
</div>

Quelle

2017-03-28 08:57:51

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container-fluid"> 
 
    
 
    <p>You can define it using md,sm and xs</p> 
 
    <div class="row"> 
 
    <div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavender;">Java</div> 
 
    <div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavenderblush;">PHP</div> 
 
    <div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavender;">JQuery</div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

Quelle

2017-03-28 09:06:53

Bootstrap 3 Spalten reagieren

Antwort

Verwandte Themen