ブートストラップ3カラムレスポンス

ブートストラップでどうすればいいですか？私は3列を持っていて、それをモバイルまたはデスクトップ上に置いて3列にしたい。モバイル上のブートストラップ3カラムレスポンス

<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>

デスクトップ上の

First | Second | Third

それはここでは、この

First | Second 
| Third

私はデスクトップ上でこれを実現したい

とモバイル

First | Second | Third

のようになっフィドルです - >https://jsfiddle.net/y28ugzp6/

出典

2017-03-28 Shafiq Mustapa

変更クラス - 実際には、'だけで行うことができますcol-xs-4'を使用すると、すべてのサイズで動作します。また、これらのクラスが実際に意味するものを読んでから、自分で簡単に答えることができます。 –

'col-xs-4'すべての列に対して – MUT

xs-6は余分に小さいことを意味し、幅は50％です。外側divの幅は常に100％ですので、xs-4は自動的に2つに分割されます –

はcol-xs-4に、すべてのdivのクラスを設定します。

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

出典

2017-03-28 08:56:34 Arkej

ただ、一つのクラス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>

出典

2017-03-28 08:57:36 neophyte

ベター#Arkejです。

しかしあなたはまた、次のように行うことができます：COL-XS-4 COL-SM-4` `へ

<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>

出典

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>

出典

2017-03-28 09:06:53

ブートストラップ3カラムレスポンス

答えて

関連する問題