短いバージョン: col-x-offset-n は左にのみ適用されますか、それとも 12 にする必要がある場合は左右に適用されますか? たとえば、「col-x-10 col-x-offset-1」を実行して、左右に 1 つの余分な列を持つ 10 列のコンテナーを取得できますか? うまくいくように見えますが、これはドキュメンテーションが示唆することではありません。
長いバージョン: 例として、ブートストラップ 3 グリッド システムを使用して div を中央に配置しようとしています。col-xs サイズでは全幅にしたいのですが、それ以上は両側にもう少しパディングを入れて中央に配置したいです。もちろん、すべてのドキュメントでは、列の数は合計 12 にする必要があると書かれています。
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-10">
...content here...
</div>
<div class="col-sm-1">
</div>
</div>
</div>
左右のパディングのように機能する 2 つの空の col-sm-1 列で期待どおりに動作します。しかし、-offset を使用すると、より少ないマークアップでそれを行うことができます。
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
...content here...
</div>
<div class="col-sm-1">
</div>
</div>
</div>
ブートストラップのドキュメントにあるように、「.col-md-offset-* クラスを使用して列を右に移動します。これらのクラスは、列の左マージンを * 列分増やします。」したがって、この場合、10 列、さらにオフセットに 1 列、さらに次の空の col-sm-1 div に 1 列があり、12 列に相当します。
最後に質問です: 最後の空の col-sm-1 div を削除しても同じ結果が得られます (前の両方の例と同様にページは中央に配置されます) が、列の合計は 11 までしかありません。
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
...content here...
</div>
</div>
</div>
これでいいですか？Bootstrap は最後の列を埋めるだけですか? ドロップして、「col-sm-10 col-sm-offset-1」または「col-sm-8 col-sm-offset-2」または「col-sm-6 col-sm-」のみを使用したいと思います。 offset-3" (これらは合計でそれぞれ 11、10、および 9 列しか追加されませんが)、これは本当にそれを行う方法ですか、それともうまくいくのは単なる癖ですか? 必要に応じて、ブートストラップがオフセットを左右の両方に適用するように見えますが、それを確認するためのドキュメントが見つかりません。
(そして、この単純な例では、ここで説明することを行うためのより簡単な方法があるかもしれませんが、単純な div を margin: 0 auto; またはそのようなもので中央に配置するだけでなく、 -offset がどのように機能するかを理解しようとしています。)