BinaryDevelop
  1. ホーム
  2. twitter-bootstrap

[解決済み] 行を組み合わせたブートストラップ(rowspan)

2022-06-11 22:24:58

質問

私は Twitter Bootstrap をテストしているところですが 基本的な行の足場にはまってしまいました。そのドキュメントを何度も見直して、基本的に列の中に列を入れ子にすることができる入れ子列を見ることができましたが、行を1つに結合して、結合していない行の隣の列に並べる機能が見つかりませんでした。 行を1つに結合し、結合されていない行の隣にある列と整列させる機能を見つけることができません。

下の図は、私が達成したいことを説明するものです。

私が見つけた唯一の回避策は、テーブルを使用することですが、このアイデアは好きではありません。 私の見解では、テーブルを使用すると応答性が損なわれるからです。

どなたか、これに対するエレガントな解決策をお持ちではないでしょうか。 私が行う Web レイアウトのほとんどは、細かいレベルの柔軟性を必要とするので、ここで何か有用な情報を得ることができれば素晴らしいことだと思います。

どのように解決するのですか?

Divはデフォルトで縦に積み重なるので、列内の"rows"を特別に処理する必要はありません。 

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>

出力します。

ここで バイオリン .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します