Question

目前我正在使用RubyOnRails和bootstrap作为框架进行推特克隆。当尝试使用“col-sm”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中。代码有什么问题，或者最新版本的bootstrap是否意味着我需要做一些不同的事情？

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个bootstrap列宽，因此它会扩展到容器之外。使用col-sm-2 / col-sm-10可以解决问题。

其次，列大小每行最多可添加12列。您在同一行中有col-sm-1，col-sm-11和col-sm-12。

Bootstrap列未正确对齐

1 个答案: