137

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

下の図は、私が達成したいことを示しているはずです。

行スパン レイアウトのサンプル

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

誰かがこれに対するエレガントな解決策を持っていますか? 私が行う Web レイアウトのほとんどは、細かいレベルの柔軟性を必要とするため、ここで役立つものを取り上げることができれば幸いです。

4

6 に答える 6

105

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>

出力：

ここに画像の説明を入力

これがフィドルです。

于 2013-05-03T05:20:11.933 に答える
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;
}
于 2013-05-03T04:21:36.797 に答える
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;}
于 2013-05-03T05:06:43.917 に答える
1 

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>

于 2019-04-29T08:50:27.530 に答える