8

次のようなレイアウトを取得しようとして、Twitter Bootstrap フレームワークを使用しています。

ご希望のレイアウト

これが今の様子です：

現在のレイアウト

jsFiddle フルスクリーン

jsフィドル

フォーム コンテナーの幅は、ブラウザー (Twitter Bootstrap の CSS メディア クエリ) の幅に基づいて変化します。アイコンボックスの幅は常に 14px です。

static-width-sidebar/fluid-content CSS レイアウトに基づいてさまざまなことを試し、テキスト入力幅を埋めるようにしました。

私の唯一の選択肢は、テキスト入力の絶対幅を定義する独自の CSS メディアクエリを作成することだと思います。

<div class="container">
    <div class="row">
        <section class="span9">
            <h2>Our Theme</h2>
            <p>lorem ipsum...</p>
        </section>
        <div class="span3">
            <section class="patch-well">
                <h2>Contact Us</h2>
                <p>Send a message......lorem ipsum...</p>
                <form>
                    <fieldset class="control-group">                        
                        <div class="input-prepend">
                            <span class="add-on">
                                <i class="icon-user"></i>
                            </span><input type="text">
                        </div>
                        <div class="input-prepend">
                            <span class="add-on">
                                <i class="icon-envelope"></i>
                            </span><input type="text">
                        </div>
                        <textarea></textarea>
                        <button type="submit" class="btn btn-default">Send message</button>
                    </fieldset>
                </form>
            </section>
        </div>
    </div><!-- row -->
</div>

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

body { padding: 10px }

.patch-well {
  color: #FFF;
  background: url('http://subtlepatterns.com/patterns/darkdenim3.png') repeat;
  padding: 20px;
  text-align: center;

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;

  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}

.input-prepend {

}

.input-prepend .add-on {

}

.input-prepend input {

}
4

4 に答える 4

2

フォーム全体を span3 に入れると、行幅の約 25% になります。したがって、解像度が大きい場合、span3 はフォーム全体を含めるのに十分ではありません。小さい解像度では、span3 の幅は 100% になり、小さい解像度では見栄えがよくなります。他のスパンクラスを使用して、慎重に慎重にスパンクラスの数値を計算してください。ここのようにまた、行クラスの代わりに行流体クラスを使用することを好みます。幅で操作する方が簡単です。

常にこのような構造を使用します

<div class="row-fluid">
  <div class"span3">
     <!-- content1 -->
  </div>
  <div class"span9">
     <div class="row-fluid">
        <div class="span6">
           <!-- content2 -->
        </div
        <div class="span6">
           <!-- content3 -->
        </div
     </div>
  </div>
</div>

フローティングなしでデザインに新しい行が必要な場合、および親要素の幅の 100% が必要な場合は常に、行流体を使用することに注意してください。子要素は再び 12 個の要素の合計にまたがることができるためです。この例では、"content1" は大きな解像度では幅の 25% を使用しますが、小さな解像度では 100% の幅になります。大きな解像度では、"content2" と "content3" は親の幅の 100% になりますが、それはコンテナーの幅の 75% です。小さい解像度では、すべてのスパン クラスの幅が 100% になります。場合によってはそれが望ましくない場合は、デフォルトのブートストラップ css を自分のクラスでオーバーライドしてください。

私の言いたいことを理解していただければ幸いです。私の英語でごめんなさい:)

于 2012-07-29T02:40:24.610 に答える
1

これはあなたが望むものですhttp://jsfiddle.net/YxKfc/14/、チェックしてください。

于 2012-07-29T03:19:12.883 に答える
0

また、ブートストラップを使用すると、レイアウト全体を流動的にする必要がないため、オブジェクトの最小幅をシミュレートできます。あなたの場合、そのナビゲーションのラッパースパンと行を流動的にしないようにすることができます。

于 2012-07-29T02:16:18.457 に答える
0

多くの CSS フレームワークと同様に、padding. これを脱いで

.patch-well {
  padding: 20px;
}
于 2012-07-29T02:02:47.723 に答える