web-dev-qa-db-ja.com

行を結合するブートストラップ（rowspan）

私はテストしています Twitter Bootstrap そして行を使った基本的な足場で動けなくなりました。私は彼らのドキュメンテーションを何度も見直して、基本的に列の中に列を入れ子にすることができる入れ子になっている列を見ることができますが、私は行を1つに結合する能力を見つけることができません。

下の写真は私が達成したいことを説明しているはずです。

rowspan layout sample

私が遭遇した唯一の回避策はテーブルを使用することですが、私の見解では応答性はテーブルの使用ではうまくいかないだろうということであるので私はこの考えが好きではありません。

誰かがこれに対して何か優雅な解決策を持っていますか？私がしているWebレイアウトの大部分は、細かいレベルの柔軟性を必要とするので、ここで何か有用なものを拾うことができれば素晴らしいでしょう。

twitter-bootstrapbootstrap-grid
109
Seong Lee

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>

これが フィドル です。

92
Paul Keister

ブートストラップ列の入れ子を使うべきです。

ブートストラップ または ブートストラップ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/

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

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

列の高さは自動です。2行目を追加すると（私の例ではそうですが）、列の高さはそれに合わせて調整されます。

72
Alcalyn

注：これは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 Tweakで修正できます（最初の子に適用されているのと同じCSSで、最初の子を過ぎたものに拡張されています）。

.row-fluid [class*="span"] {
    margin-left: 0;
}
12
pickypg

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

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;}
7
Manish Sharma

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

行と列を入れ子にすることで、応答性を維持しながら同じ結果を得ることができます。

これはこの問題に対する最新の回答です。

<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>

あなたはできます ここでcodepenを見てください

1
vasavest
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>
0
SUDIP SINGH