フォームグループは、前のフォーム・グループ

Question

を過延伸された私は、パネルの内側に非常に簡単なフォームを持っているブートストラップ3.3.6を使用しています：

それはかなりシンプルだけど」ポスト "ボタンがうまく整列していません。

フォームの背後にあるHTMLです：

<div class="panel panel-primary"> 
    <div class="panel-heading">Say something...</div> 
    <div class="panel-body"> 
    <form class="form-horizontal"> 
     <div class="form-group"> 
     <div class="col-md-12"> 
      <textarea class="form-control" 
        rows="5" 
        placeholder="What are you up to?"></textarea> 
     </div> 
     </div> 
     <div class="form-group"> 
     <div class="col-md-offset-11 col-md-1"> 
      <button type="submit" class="btn btn-primary">Post</button> 
     </div> 
     </div> 
    </form> 
    </div> 
</div> 

.FORM水平内部ブートストラップの資料によると、.FORM-グループは.rowように振る舞う - したがって、ボタンを相殺（COL-MD-オフセット-11）は、ボタンをテキストエリアに垂直に配置する必要があります。

このパネルには、別のページで行の内側にロードされます。

<div class="container"> 
    ... 
    <div class="row"> 
    <div class="col-md-offset-2 col-md-8"> 
     <div ui-view="quickPost"></div> 
    </div> 
    </div> 
    ... 

.FORM-グループは.rowように振る舞うと、それが正常に動作する必要があり.row内（それは行の内部行をラップするために罰金だとき）。

私はCSSとブートストラップに慣れていないので、私はそれが私の愚かな監督だと確信しています。誰でも私が作ったミスを見つけられますか？

Answer 1

ここでの問題は、ブートストラップのグリッドシステムとまったく同じではありません。ポストボタン用に割り当てたサイズが単純すぎるためです。 （これはcol-md-8内部col-md-1にありますので、それだけで.container（1170px）の最大幅の1/12 * 8/12 = 5.5％を取得：〜65pxを、それがさえアカウント15ピクセルのパディングを考慮していない。）

その結果、狭い列の中に残るように改行することができないボタンは、使用可能なスペースからオーバーフローし、アライメントがオフになります。

あなたはカップルの方法でこれを解決することができます：あなたはそれを取ることができ、列の数を増やすことで、ボタンのためのより多くのスペースを割り当てることができ、その後、ボタンが右端にBootply exampleに触れるように、100％の幅に広げあります

button { 
    width: 100%; 
} 

<!-- [...] --> 
    <div class="col-md-offset-10 col-md-2"> 
     <button type="submit" class="btn btn-primary">Post</button> 
    </div> 
<!-- [...] --> 

それとも、あなたは右サイドに対するボタンのフラッシュを維持するためにブートストラップのpull-rightクラスを活用することができます（彼らは何の効果もないので、その時点で、指定した列の数は関係ありません）Bootply example ：

<!-- [...] --> 
    <div class="col-md-offset-11 col-md-1"> 
     <button type="submit" class="btn btn-primary pull-right">Post</button> 
    </div> 
<!-- [...] --> 

希望すると便利です。ご質問がある場合はお知らせください。