web-dev-qa-db-ja.com

bootstrap=全幅の列

この質問はしばらくの間ありましたが、合理的な答えは見つかりません。

ブートストラップは次のように述べています：コンテンツは列内に配置する必要があり、列のみが行の直接の子になります。

しかし、行があり、全幅のdivを下に配置する必要がある場合はどうすればよいですか？ col-xs-12を配置する必要がありますか？例えば

<div class="row">
    <h1>Title</h1>
    <div class="col-md-6">Some content here</div>
    <div class="col-md-6">Other content here</div>
</div>

H1は全幅です。

bootstrapによると、これを行うのは正しくないので、どうすればよいですか？h1を列内に配置する必要がありますか？

twitter-bootstrapgrid
12
Stathis G.

行は列の単一の水平グループなので、h1要素は行の上に属します：

<h1>Title</h1>
<div class="row">
    <div class="col-md-6">Some content here</div>
    <div class="col-md-6">Other content here</div>
</div>

または、単一の全角列を使用する独自の行で、必要ではありません：

<div class="row">
    <div class="col-md-12">
        <h1>Title</h1>
    </div>
</div>
<div class="row">
    <div class="col-md-6">Some content here</div>
    <div class="col-md-6">Other content here</div>
</div>
11
JohnnyHK
<div class="row">
    <h1>Title</h1>
</div>
<div class="row">
    <div class="col-md-6">Some content here</div>
    <div class="col-md-6">Other content here</div>
</div>

何をしているのかわからない場合は、colsを使用する必要があります。問題は、colsにpadding-left 15pxおよびpadding-right 15px。また、行にはmargin-left -15pxおよびmargin-right -15px。 colなしの行でdivを使用している場合：

<div class="row">
    <div>
        content
    </div>
</div>

次に、次のように混ぜると、左と右のインデントに問題が発生します。

<div class="row">
    <div class="col-...">
        content
    </div>
</div>

したがって、colsを使用する方が常に適切です。

4
Sun