Бутстрап-столбцы не выравниваются должным образом

Question

В настоящее время я делаю твитер-клон, используя RubyOnRails и bootstrap в качестве рамки. При попытке распространить текст в почтовом панели с помощью «Col-см» Div класс, текст, кажется, застряла вместе на левой стороне, 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> 

Я использую последнюю версию bootstrap sass 3.3.6, которая включена в gemfile. Что-то не так с кодом, или последняя версия бутстрапа означает, что мне нужно делать что-то другое?

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> 

Первый выпуск является текст «АВАТАР» шире, чем 1 колонка начальной загрузки, так что это расширение из вашего контейнера. использование col-sm-2/col-sm-10 может решить проблему.

Во-вторых, размеры столбцов должны составлять до 12 столбцов в строке. Здесь у вас есть col-sm-1, col-sm-11 и col-sm-12 все в одной строке.