行を組み合わせたブートストラップ（rowspan）

127

私はテストしています Twitter Bootstrapをしていますが、行のある基本的な足場に行き詰まりました。私はそれらのドキュメントを何度も再訪しましたが、基本的に列内で列をネストできるネスト列を見ることができますが、行を1つに結合する機能を見つけることができず、結合されていない行の隣の列と整列させることができません。

下の写真は、私が達成したいことを示しています。

rowspanレイアウトのサンプル

私が遭遇した唯一の回避策はテーブルを使用することですが、私の考えではテーブルの使用では応答性が機能しないため、このアイデアは好きではありません。

誰かこれにエレガントな解決策がありますか？私が行うほとんどのWebレイアウトには細かいレベルの柔軟性が必要となるので、ここで何か役に立つものをピックアップできればすばらしいでしょう。

twitter-bootstrap  bootstrap-grid 
— ソン・リー
ソース

回答:

98

divはデフォルトで垂直にスタックするため、列内の「行」を特別に処理する必要はありません。

div {
  height:50px;
}
.short-div {
  height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>
スニペットを展開

こちらがフィドルです。

— ポール・キースター
ソース
2
どうもありがとう。それが私が探していたものです！アプローチは基本的に同じなので、Bootstrapのドキュメントでネスト列の下にこれについて追加で言及したいと思います。
— Seong Lee
1
あなたの例では、あなたが定義し1row=25px、2row=50px。あなたはスパンされたdivを行全体と同じくらい高くすることができますか？追加しようとしました.row{height:100%;}が、うまくいきませんでした。
— Tomer W 2014
はい、元の例の@carterはブートストラップ3に準拠していませんでした。修正しました。
— Paul Keister、
1
この例では、奇妙に見える2行目にガターがあります。
— Connie DeCinko
83

ブートストラップ列のネストを使用する必要があります。

Bootstrap 3またはBootstrap 4を参照してください。

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

（フィドル画面で、テスト画面を拡大して結果を確認します。私はcol - md- * を使用しているため、レスポンシブスタック列です）

注：BS2が列のネストを許可するかどうかはわかりませんがが、Paul Keisterの回答では、列のネストは使用されていません。あなたはそれを使用し、ブートストラップがうまくいく間CSSを再発明することを避けるべきです。

列の高さは自動です。2つ目の行を追加すると（この例では私が行うように）、列の高さが自動的に調整されます。

— アルカリン
ソース
10
これは箱から出してBootstrapで動作し、CSSの微調整を必要としないため、これは受け入れられる答えになるはずです
— cheenbabes
受け入れられた答えはより読みやすいです。コードスニペットとJSfiddleへのリンクとIMHOポールキースターの例は、アルカリンの例よりも明確です。だから、少なくともアルカリンの答えが改善されるまで、ポール・キースターの答えは受け入れられた答えとして残されるべきだと私は思うのです。
— naXa 2018年
1
私のブラウザー（Chrome）で@Alcalynを使用すると、回答からリンクされたフィドルで期待どおりの結果が得られません（質問の画像を参照）。実際の結果は、列に配置されたすべてのdivです。
— naXa 2018年
1
スパンがすべて整列した単一の列が表示される場合、これは-md-レスポンシブルールが原因です。期待される結果を表示するには、画面を拡大する必要があります。スパンを小さな画面の列として表示する必要がある場合は-md-、-sm-またはに置き換え-xs-ます。これはブレークポイントの質問です（bootstrapdocs.com/v3.0.3/docs/css/#gridを参照）。
— アルカリン
12

注：これは、Bootstrap 2に関するものでした（質問がされたときに関連します）。

これを使用row-fluidして、既存の内に流体（パーセンテージ）ベースの行を作成することで実現できblockます。

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

ここだJSFiddle例。

row-fluid最初のスパンの後のスパン内に表示される（または表示されない）奇妙な左マージンがあることに気付きました。これは、CSSを少し調整することで修正できます（これは、最初の子に適用されたCSSと同じで、最初の子を過ぎたものに拡張されます）。

.row-fluid [class*="span"] {
    margin-left: 0;
}
— Pickypg
ソース
あなたの努力に感謝しますが、私の選択した回答で示唆されているように、行はこれを達成するために行流体を使用する必要がないようです。本当に感謝しています！
— Seong Lee
1
非常に当てはまりますがrow-fluid、内側の行のサブスプリットを開始するときになることを忘れないでください。
— pickypg 2013年
7

これを確認してください。それがあなたのために完全に役立つことを願っています。

http://jsfiddle.net/j6amM/ 

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}
— マニッシュシャルマ
ソース
1

Paulの答えは、ブートストラップの目的に反するようです。ビューポート/画面サイズに応答するということです。

行と列をネストすることで、応答性を維持しながら同じ結果を得ることができます。

この問題に対する最新の対応を以下に示します。

<div class="container-fluid">
  <h1>  Responsive Nested Bootstrap </h1> 
  <div class="row">
    <div class="col-md-5" style="background-color:red;">Span 5</div>
    <div class="col-md-3" style="background-color:blue;">Span 3</div>
    <div class="col-md-2">
      <div class="row">
        <div class="container" style="background-color:green;">Span 2</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:purple;">Span 2</div>
      </div>
    </div>
    <div class="col-md-2" style="background-color:yellow;">Span 2</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="container" style="background-color:yellow;">Span 6</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:green;">Span 6</div>
      </div>
    </div>
    <div class="col-md-6" style="background-color:red;">Span 6</div>
  </div>
</div>
スニペットを展開

ここでコードペンを表示できます。

— Vasavest
ソース
0 

div {
  height:50px;
}
.short-div {
  height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>
スニペットを展開

— SUDIP SINGH
ソース
<div class = "col-sm-2"> <div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4" style = "background- color：yellow; "> <input type =" file "id =" imgInp "name =" img "accept ="。png、.jpg、.jpeg "> <！-<input type =" text "src =" "class =" form-control "id =" imgName "size =" 40 "> </ input>-> <img id =" img-upload "src =" "alt ="トランスポーター "width =" 300％ " height = "50％" class = "rounded-circle" /> </ div> </ div> </ div>
— SUDIP SINGH
2
コードの周りに説明を追加してください。OPと将来の読者があなたの答えを簡単に理解できるように。
— Sangam Belose
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.