ブートストラップカラムが垂直に配置されているときの中心合わせ

Question

モバイルビューに折りたたまれているときにブートストラップカラムを中心にして少し問題があります。私はこのようなコードを使用して、私はクロームに行くときの要素を検査し、携帯のボタンをクリックし、2番目の列の一番上に行くだろうビューに最初の列を折りたたんであろうがい

<div class="col-md-4"> 
 
     <h1>Some Text</h1> 
 
     <img src="#" width="250px" height="250px"> 
 
    </div> 
 
    <div class="col-md-8"> 
 
     <h2>more text here</h2> 
 
    </div>

私が望むページの真ん中にはない。私はこれをどのように修正するか考えていますか？

Answer 1

ブートストラップのオフセットクラスを使用すると、マークアップや余分なCSSを変更する必要がなくなります。キーは、行の残りのサイズの半分に等しいオフセットを設定することです。あなたは偶数カラム幅を使用しているので、これは機能します。ブートストラップオフセットへのリンクは次のとおりです。http://getbootstrap.com/css/#grid-offsetting

具体的にはモバイル用に、さまざまなサイズのデバイスの列幅を変更できます。あなたの例ではmdだけを指定しています。参照：http://getbootstrap.com/css/#grid-example-mixed-complete。列のオフセットとデバイスサイズの組み合わせによって、必要なものが得られます。

Answer 2

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 

 
<div class="container"> 
 
<div class="row"> 
 
<div class="col-lg-2 col-xs-offset-2"> 
 
     <h1>Some Text</h1> 
 
     <img src="http://via.placeholder.com/200x100"> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
     <h2>more text here</h2> 
 
    </div> 
 
    
 
    
 
</div> 
 
</div> 
 
<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>

ここでは、これは、それは私が何をしたいんが、私は唯一それが時にモバイルビュー上とするとき、彼らはサイドである必要があり、コンピュータ上の中心になりたいみかん働くjsfiddle