1

Bootstrap 2.3 レイアウトを Bootstrap 3 に変換していますが、現在div、幅をコンテンツと同じ幅に自動的に保ちながら、中央揃えにすることに固執しています。

編集:以下の回答で Firefox の問題が修正されたため、主な問題を反映するように質問を更新しました。

Bootstrap 2.3 でレンダリングされたログイン フォーム - コンテンツは中央に配置され、コンテンツが必要.borderと.wellする幅だけです。

ブートストラップ 2 のレイアウト

Bootstrap 3 を試してみましょう: http://jsfiddle.net/yq9Ww/13/

BS3トライ

どうやら何かが.well幅を広げすぎているようですが、神の愛のために、.wellコンテンツの幅を折りたたむ方法がわかりません。

BS 2.3 と同じ結果を達成する方法を明らかにできる人はいますか?

PS。.border同じレイアウトがはるかに広いコンテンツにも使用され、それも収まる必要があるため、の幅を修正できません。

4

2 に答える 2

2

.input-group-btn何らかの理由で Bootstrap に次のルールが設定されているため、私のレイアウトを台無しにしたのは であることが判明しました。

.input-group-addon, .input-group-btn {
  width: 1%;
}

そして、おそらく他のルールと組み合わせて、.well親の幅をすべて取ることを余儀なくされました。

デバイスに関しては、入力は 100% 幅である必要があり、 xs 以外の画面でxsは修正が設定解除されました。width

/* .input-group inside .border causes 100% width (some BS3 stuff) */
@media(min-width: 768px){
    div.border .input-group-addon, div.border .input-group-btn {
        width: auto;
    }
}

次に.border、インライン ブロックを作成します。

div.border {
  /* ... */
  display: inline-block;
}

すべての画面サイズで期待どおりに動作する JSFiddle を次に示します。

http://jsfiddle.net/yq9Ww/16/

更新:これは、 WebKitブラウザーでのみ問題になるようです。Firefox の場合、 を設定するinline-blockだけで十分です。

于 2013-09-17T20:12:29.003 に答える