Bootstrap列未正確對齊

目前我正在使用RubyOnRails和bootstrap作爲框架來製作一個Twitter克隆。當試圖分配使用「COL-SM」的div類在後面板一些文本，該文本似乎左側卡住在一起， as seen here.Bootstrap列未正確對齊

這裏是我的代碼：

<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版本。代碼有問題嗎？最新版本的bootstrap是否意味着我需要做一些不同的事情？

來源

2016-04-24 Onion

將您的渲染頁面粘貼到此工具http://www.bootlint.com/#byDirect並解決錯誤。它應該解決問題。我認爲問題是列應該在行內，所有行都需要在容器內。 –

謝謝你的幫助 – Onion

看這個部分：

<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都在同一行。

來源

2016-04-24 15:28:28

真棒，不知道。但我所遵循的教程在獨特的地方有文字，例如鏈接和內容大致居中，頭像位於左側。我如何知道每一行以便將它們對齊到特定的位置？ – Onion

對不起，我設法找到了它！感謝您的幫助：） – Onion

Bootstrap列未正確對齊

回答

相關問題