デスクトップ上でのみカラムをオフセットする方法

Question

私はブートストラップ3グリッドシステムに新しくはありませんでしたが、以前はモバイル上でスタックされたカラムでしか動作しませんでした。

今日、私はモバイルでは、全幅（スクロールバーなし）の単一の列を持つグリッドが必要です。より大きなデバイスでは、適切な幅が維持されている間、列は中央に配置（オフセット？）されます。

どうすればいいですか？

は、これまでのところ、私は次のことを試してみました：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-3"> 
... content ... 
     </div> 
    </div> 
</div> 

これは、デスクトップとモバイルに細かい探していますが、その後私は、モバイルでのスクロールバーを持って実現しました。

HTMLを囲むことはできますか（ここには表示されません）？それともこのコードに関連していますか？

ありがとうございます。

Answer 1

ここには2つの解決策があります。

最初の解決策は、列の最大幅を固定ピクセル数（この場合は650px）に設定します。

2番目の解決策は、ブレークポイントに達するまで列の最大幅をウィンドウの特定の割合に設定し、100％に設定します。

ソリューション1は、（それをフルスクリーンを実行し、行動でそれを表示するには、ウィンドウの幅を変更する）：

.constrain { 
 
    max-width: 650px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="constrain"> 
 
    <div class="row"> 
 
     <div class="col-md-12" style="background-color: coral;"> 
 
     Content 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

ソリューション2（フルスクリーンそれを実行して表示するには、ウィンドウの幅を変更しますそのアクションで）：

.constrain { 
 
    max-width: 50%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
@media only screen and (max-width: 650px) { 
 
    .constrain { 
 
    max-width: 100%; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="constrain"> 
 
    <div class="row"> 
 
     <div class="col-md-12" style="background-color: coral;"> 
 
     Content 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>