ブートストラップの調整

フレームワークを使用する場合、Bootstrapは通常3つの主な問題に直面します。

1. 列の下部にコンテンツを配置する方法は？
2. 1つの.rowに同じ高さの列の複数行ギャラリーを作成する方法は？
3. 合計幅が12単位未満で、残りの幅が奇数の場合、複数の列を水平方向に中央揃えするにはどうすればよいですか？

最初の2つの問題を解決するには、小さなプラグインをダウンロードする必要があります 。

ここで 3番目の問題の解決策を探ります 。

共通コード

<style> [class*=col-] {position: relative} .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0} .row-centered {text-align:center} .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} </style> <script src="assets/conformity/conformity.js"></script> <script> $(document).ready(function () { $('.row-conformity > [class*=col-]').conformity(); $(window).on('resize scroll', function() { $('.row-conformity > [class*=col-]').conformity(); }); }); </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

1.コンテンツを列の下部に配置する方法

 <div class="row row-conformity"> <div class="col-sm-3"> <br><br><br> </div> <div class="col-sm-3"> <div class="to-bottom">    </div> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2. 1つの.rowに同じ高さの列の複数行ギャラリー

 <div class="row row-conformity"> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.合計幅が12単位未満で、残りの幅が奇数の場合、複数の列の水平方向の中央揃え

 <div class="row row-centered"> <div class="col-sm-3">...</div> <div class="col-sm-4">...</div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

両方のクラスを一緒に使用できます。

 <div class="row row-conformity row-centered"> ... </div>