以下のコードがあり、外側の「行」divの「ウェル」要素を中央に配置します。 text-align:center(内側のDIV要素ではなく、テキストを中央に配置する)などのさまざまなアプローチを試しました。
jsfiddle です。アイデアは、私が「よく」タイルのページを取得し、それが4ほど後にラップするというものです。ただし、4未満の場合は、ページの中央に表示されます。
<body class="container-fluid">
<div class="row">
<div class="well span2">
<div class="row">
<div class="span2">
Header
</div>
</div>
<div class="row">
<div class="span2">
Sub Header
</div>
</div>
</div>
<div class="well span2">
<div class="row">
<div class="span2">
Header
</div>
</div>
<div class="row">
<div class="span2">
Sub Header
</div>
</div>
</div>
</div>
</body>
私はこれを次のようにして解決しました。
<body class="container-fluid">
<div class="row">
<div class="span6" style="float: none; margin: 0 auto;">
....
</div>
</div>
</body>
Bootstrap 4には、これ専用のcssクラスがあります。以下は行のコンテンツを中央に配置します:
<div class="row justify-content-center">
...inner divs and content...
</div>
参照: https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment 、詳細については。
これを試してください、それは動作します!
<div class="row">
<div class="center">
<div class="col-xs-12 col-sm-4">
<p>hi 1!</p>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 2!</p>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 3!</p>
</div>
</div>
</div>
次に、cssでドキュメントの中央divと中央の幅を定義します。
.center {
margin: 0 auto;
width: 80%;
}
Bootstrap 4には、次のコードを使用します。
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
参照: https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering