ブートストラップ4 - 2番目の列と2列レイアウトモバイルビューで詳細を表示する

-1

ブートストラップ4 - 2番目の列と2列レイアウトモバイルビューで詳細を表示する

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

私は、ブートストラップ2列のレイアウトを作成したいです。最初の列にはサーバーのリストがあります。 2番目の列にサーバーの詳細が表示されます。サーバーが選択されていない場合は、オンラインのサーバー数が表示されます。

モバイルビューでは、列2を列1の下に置いてはいけません。ただし、列2を非表示にしたい右から左へ）スワイプ。列2はOKでも隠されています。モバイルビューでは、サーバーのリストが表示され、ユーザーが1つのサーバーをクリックすると、ビューはサーバーの詳細を示すcolumn2に移動する必要があります。 - COL-MD-6、COL-SM-12

COLUMN2 - COL-MD-

column1の：私は、私はクラスを次のように列を持つ詳細はコラム2

にレンダリング/ロードされていることができます6、col-sm-12

私は正しい方向に私を導くことができますか？

出典

2017-09-20 Shark N

を下回っているとき私にHTML、CSSコード –

https://getbootstrap.com/docs/4.0/utilities/displayを提供してください、div要素を非表示になります/ – Sergey

がhtmlコードを追加しました。 –

あなたはcssから作成する必要があります。メディアクエリを使用することによって異なるIDまたはクラス名で両方のdivをダイビングします。そして、

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

そして、これは、デバイスの画面の幅が300ピクセル

出典

2017-09-20 19:55:27 kasun

ブートストラップ4 - 2番目の列と2列レイアウトモバイルビューで詳細を表示する

答えて

関連する問題