このタイプのグリッドシステムは、どのようにしてtwitterブートストラップで作成できますか？

私はこのようなグリッドシステムを作ろうとしていますhttps://www.google.com/about/careers/、誰でも正しい方法でこれを作る方法を知っていて、それもモバイルをサポートしていますか？このタイプのグリッドシステムは、どのようにしてtwitterブートストラップで作成できますか？

出典

2016-10-14 mutkan

デモもフルページモードでデモを参照してくださいあなたの最後で確認してください。 –

は、添付

img { 
 
     padding: 5px; 
 
    }

<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/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container-fluid"> 
 

 
     <p>Please see demo in full page mode.</p> 
 
     <div class="row"> 
 
      <div class="col-md-6"> 
 
       <div class="row"> 
 
        <div class="col-md-12"> 
 
         <img src="https://services.google.com/fh/files/misc/careers-homepage-datacenter360.jpg" class="img-responsive"> 
 
        </div> 
 
       </div> 
 
       <div class="row"> 
 
        <div class="col-md-6 col-sm-6 col-xs-6"> 
 
         <img src="https://services.google.com/fh/files/misc/careers-homepage-datacenter360.jpg" class="img-responsive"> 
 
        </div> 
 
        <div class="col-md-6 col-sm-6 col-xs-6"> 
 
         <img src="https://services.google.com/fh/files/misc/careers-homepage-datacenter360.jpg" class="img-responsive"> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-6"> 
 
       <div class="row"> 
 
        <div class="col-md-6 col-sm-6 col-xs-6"> 
 
         <img src="https://services.google.com/fh/files/misc/careers-homepage-datacenter360.jpg" class="img-responsive"> 
 
        </div> 
 
        <div class="col-md-6 col-sm-6 col-xs-6"> 
 
         <img src="https://services.google.com/fh/files/misc/careers-homepage-datacenter360.jpg" class="img-responsive"> 
 
        </div> 
 
       </div> 
 
       <div class="row"> 
 
        <div class="col-md-12"> 
 
         <img src="https://services.google.com/fh/files/misc/careers-homepage-datacenter360.jpg" class="img-responsive"> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
     </div> 
 
    </div>

出典

2016-10-14 09:49:20

あなたの答えをありがとうございますが、画像間の不均等な間隔が問題です。それをどうすれば解決できますか？ @ anil-panwar – mutkan

ブラウザで要素を調べることができ、col-md-xyzクラスのパディングやマージンを調べることができます。これがあなたの目的を解決したなら、upvoteを行い、答えを受け入れました。幸運を祈る –

このタイプのグリッドシステムは、どのようにしてtwitterブートストラップで作成できますか？

答えて

関連する問題