は、私は次の形式を持っている

Question

をジャンボトロン。私は、次の変更を行いました。

• は<div id=...>
• に<section id="loginForm">を変更loginFormのdivに
下部に追加された class="col-md-8"で col-md-4のdivを追加しました。

この最後の追加は、問題があると思われる場所です。以下の画像を参照してください：

をloginForm divの上class="col-md-8"の追加により、jumbotronの下部には、直後<h4>Please log in ...</h4>にジャンプしますが、私はそれをしたい場所messages divが行きます。

loginFormからcolクラスを削除すると、フォーム自体がジャンボトロン内に正しく収まるようになります（ただし、他のdivはフォームの下にあります - これは現在気には関係ありません）。

私は同様の問題に関してはthis questionを見ましたが、ボタンのスタイルを変更しても効果がありませんでした。

EDIT：

使用されている2つのcssのファイルがあります。私はこれらのファイルのいずれにも変更を加えていません。

最初はbootswatchから直接引き出されたflatlyブートストラップテーマです。

使用されている他のファイルは、site.cssでは、プロジェクトの作成からデフォルト設定：私はcol-x-12からloginFormのクラスの値を設定する場合

body { 
    padding-top: 50px; 
    padding-bottom: 20px; 
} 

/* Set padding to keep content from hitting the edges */ 
.body-content { 
    padding-left: 15px; 
    padding-right: 15px; 
} 

/* Override the default bootstrap behavior where horizontal description lists 
    will truncate terms that are too long to fit in the left column 
*/ 
.dl-horizontal dt { 
    white-space: normal; 
} 

/* Set width on the form input elements since they're 100% wide by default */ 
input, 
select, 
textarea { 
    max-width: 280px; 
} 

（またはそれを削除）jumbotronが正しくレンダリングしますが、 messages divがフォームの下に降ります。低い値（11）を指定すると、同じ方法でフォームがレンダリングされます。境界線は<h4>フィールドのすぐ下にあり、それ以外はすべてjumbotronの範囲外です。

jumbotronでこの動作の原因は何ですか。messages divがフォームの横にあり、jumbotronがフォーム全体をラップするように修正するにはどうすればよいですか？

Answer 1

フォームの下にメッセージセクションを表示するには、loginformをcol-md-12に設定してみてください。あなたがそれをすれば、ジャンボトロンはあなたが行く必要がある場所に行くのですか？

もしあなたがそれを行うならば、そしてジャンボトロンが必要なところに行くなら、ジャンボトロンの中に別のコンテナdivを追加してみてください。おそらくcol-md-12に含むdivを設定してください。