4

私の Bootstrap グリッドは、サイドバーと 2 つのコンテンツ列の 3 つの列に分かれています。

<div class="col-xs-2">
    Sidebar column.
</div>
<div class="col-xs-3">
    Left content column.
</div>
<div class="col-xs-7">
    Right content column.
</div>

サイドバーではなく、2 つのコンテンツ列にまたがる確認メッセージを表示したいと考えています。ブートストラップ グリッド レイアウトを変更せずにこれを行うことは可能ですか?

例 (見苦しい HTML テーブル):
http://jsfiddle.net/jcCUs/

確認メッセージはときどきしか表示されないため、メッセージの有無に基づいて Bootstrap グリッド レイアウトを動的に変更するのは理想的ではないようです。

どうもありがとう！

更新:残念ながら、列の幅や比率を変更する必要がある解決策 (以下で提案されているように) は実行できません。ページ (および Web サイト) の他の多くの要素は、既存の 2-3-7 レイアウトに基づいており、確認メッセージを統合するためだけに全体の比率を破棄することはできません.

4

4 に答える 4

1

PhilNicholas が提案したように 3 と 7 を 10 サイズの列にラップすることに加えてalert、左右の列をオーバーレイするように位置を絶対に変更できます。そうしないと、アラートが表示されたときにコンテンツが上下にスライドします。

.alert {
    position:absolute;
    z-index:1;
}

デモ: http://bootply.com/91235

于 2013-10-31T18:59:42.230 に答える
0

あなたが正しく指摘したように、オフセットを使用して、必要に応じて表示することができます。

<div class="row">
  <div class="col-xs-2">
    <div class="well">col-xs-2</div>
  </div>
  <div class="col-xs-10 col-sm-offset-2"><div class="alert alert-success">Updated Successfully!</div></div>
  <div class="col-xs-3">
    <div class="well">col-xs-3</div>
  </div>
  <div class="col-xs-7">
    <div class="well">col-xs-7</div>
  </div>
</div>

デモはこちら

于 2014-02-06T17:25:19.427 に答える
0

Bootstrap グリッドをいろいろいじった後、現在の作業ソリューションを以下に示します。

予想以上に簡単です...列を積み重ねるだけです!

<div class="row">
  <div class="col-xs-2">
    Sidebar (2)
    <br><br><br>
  </div>
  <div class="col-xs-10">
    Confirmation Message (10)
  </div>
  <div class="col-xs-3">
    Left Content (3)
  </div>
  <div class="col-xs-7">
    Right Content (7)
  </div>
</div>

デモ: http://jsfiddle.net/ravQm/

いくつかのメモ:

  • これは、サイドバーが確認メッセージよりも高い場合にのみ機能しますが、通常はそうです。
  • Bootstrap 3 は、この状況で非常に役立つ可能性がある多数のoffset、push、およびpullクラスを提供します。ただしThose resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier.、この特定のケースでは「xs」列を使用しているため、ここでは使用できません。ただし、参照してください: http://getbootstrap.com/css/#grid-responsive-resets

Bootstrap 3 グリッドがどのように機能するかを正確に把握していないため、これについてはまだ少し不安です。しかし、私はそれをいくつかの異なる方法でテストしており、実際に適用してさらに発見した場合は更新します.

于 2013-11-01T04:41:20.337 に答える