ブートストラップの列が正しく整列していません

Question

現在、私はRubyOnRailsとブートストラップをフレームワークとして使用してツイッタークローンを作成しています。 DIVクラス「COL-SM」を使用して、ポストパネルにテキストを配布しようとすると、テキストが左側に一緒に詰まったようで、ここで as seen here.

は私のコードです：

<div class="row"> 
    <div class="col-xs-3"> 
     <div class="panel panel-default"> 
     <div class="panel-body"> 
      <p>status</p> 
     </div> 
     </div> 
     <div class="panel panel-default"> 
     <div class="panel-body"> 
      <p>trend</p> 
     </div> 
     </div> 
    </div> 
    <div class="col-xs-6"> 
     <%= render '/components/post_form' %><br></br> 

     <% for @p in @posts %> 
     <div class="panel panel-default post-panel"> 
      <div class="panel-body"> 
       <div class="col-sm-1"> 
        AVATAR 
       </div> 
       <div class="col-sm-11"> 
        <p><%= @p.content %></p> 
       </div> 
       <div class="col-sm-12"> 
        LINKS 
       </div> 

      </div> 
     </div> 
     <% end %> 

    </div> 
    <div class="col-xs-3"> 
     <div class="panel panel-default"> 
     <div class="panel-body"> 
      <p>about</p> 
     </div> 
     </div> 
    </div> 
</div> 

私が使用していますgemfileに含まれている最新のbootstrap sassバージョン3.3.6。コードに何か問題がありますか、最新のバージョンのブートストラップは何か別のことをする必要があるのですか？このセクションでは

Answer 1

ルック：

<div class="col-sm-1"> 
     AVATAR 
    </div> 
    <div class="col-sm-11"> 
     <p><%= @p.content %></p> 
    </div> 
    <div class="col-sm-12"> 
     LINKS 
    </div> 

最初の問題は、テキスト「AVATARは」1つのブートストラップ欄より広くなっているので、それはあなたの容器の外に拡張です。 col-sm-2/col-sm-10を使用すると問題が解決する場合があります。

第2に、列サイズは1行につき最大12列になります。ここには、col-sm-1,col-sm-11、およびcol-sm-12がすべて同じ行にあります。