常に中央に置かれたブートストラップレスポンス固定幅の列

Question

固定幅のログインページを作成しようとしていますが、ページの中央に列があります。ページのような何か：私はこの

<div class="col-md-4 col-md-offset-4" style=" float: none; margin: 0 auto;"> 

そのない一貫したサイズこの方法のようにオフセットcolmsをuseing試してみました

https://www.amazon.com/sign-in 

。

Answer 1

固定幅DIVの場合、ブートストラップのグリッドは必要ありません。あなただけの操作を行います。

<div style="width: 300px; margin: 0 auto;"></div> 

Answer 2

ブートストラップの列が幅のための比率を使用するように設計されているので、あなたがブートストラップのコンポーネントでこれを行うことはできません。したがって、ビューポートのサイズに応じてサイズが変更されます。これを行うにはカスタムCSSコードを記述する必要があります。

次のスニペットを使用して必要な処理を行うことができます。 CSSメディアクエリ（ブートストラップが使用するもの）を使用します。 divの幅を600pxに設定しました。ウィンドウのサイズを768px未満に変更すると、幅が100%に変更されます。ブートストラップのxsのブレークポイントであるので、私は768pxを選んだ。

.col-fixed { 
 
    margin: 0 auto; 
 
    background-color: red; 
 
} 
 
@media (min-width: 768px) { 
 
    .col-fixed { 
 
    width: 600px; 
 
    } 
 
}

<div class="col-fixed"> 
 
    This is a fixed width column that becomes 100% when viewport is less than 768px 
 
</div>