如何使我的JQuery Masonry图像漂浮到页面顶部?

时间:2013-11-30 17:56:03

标签: jquery ruby-on-rails ruby twitter-bootstrap jquery-masonry

如您所见,在我的页面顶部,我将用户的头像(个人资料图片)拉到左侧。我还在右侧的另一列中列出了所有特定用户的帖子。问题是,自添加头像以来,帖子不会从页面顶部开始。

visual depiction

这是我的观点文件:

<div class="row">

    <div class="col-md-3" 'pull-left'>

      <strong><%= @user.username %></strong> <br>
      <%= image_tag @user.avatar(:thumb) %>
    </div>
    </div>

<div class="col-md-12">
      <div id="things" class="transitions-enabled">

  <% @user.things.each do |thing| %>
    <div class='panel panel default'>
    <div class="box">
      <%= link_to image_tag(thing.image.url(:medium)), thing %>
      <div class='panel-body'>
      <strong><p><%= thing.title %></p></strong>
      <p><%= thing.description %></p>
  By <%= link_to thing.user.username, thing.user %>

  <% if thing.user == current_user %>
    <%= link_to edit_thing_path(thing) do %>
    <span class='glyphicon glyphicon-edit'></span> Edit
  <% end %>
  <%= link_to thing_path(thing), method: :delete, data: { confirm: 'Are you sure?' } do %>
    <span class='glyphicon glyphicon-trash'></span> Delete
  <% end %>
  </div>
  <% end %>
  </div>
</div>
  <% end %>
</div> 
</div>
  </div>
  </div>

EDITS

更新

<div class="row">

    <div class="col-md-3 avatar">

      <strong><%= @user.username %></strong> <br>
      <%= image_tag @user.avatar(:thumb) %>
    </div>
    </div>

<div class="col-md-9">
      <div id="things" class="transitions-enabled">

  <% @user.things.each do |thing| %>
    <div class='panel panel default'>
    <div class="box">
      <%= link_to image_tag(thing.image.url(:medium)), thing %>
      <div class='panel-body'>
      <strong><p><%= thing.title %></p></strong>
      <p><%= thing.description %></p>
  By <%= link_to thing.user.username, thing.user %>

      <% if thing.user == current_user %>
        <%= link_to edit_thing_path(thing) do %>
        <span class='glyphicon glyphicon-edit'></span> Edit
      <% end %>
      <%= link_to thing_path(thing), method: :delete, data: { confirm: 'Are you sure?' } do %>
       <span class='glyphicon glyphicon-trash'></span> Delete
       <% end %>
      </div>
      <% end %>
      </div>
    </div>
  <% end %>
</div> 
</div>
  </div>
  </div>

1 个答案:

答案 0 :(得分:0)

你需要定义&#34;事物&#34;和#34;头像&#34;在Bootstrap中的row下。

<div class="row">
  <div class="col-md-3 avatar"></div>
  <!-- Reduce it to 9 cols here -->
  <div class="col-md-9">
    <div id="things"></div>
  </div>
</div>

我认为你不需要左拉,你的代码中也有语法错误 - 应该在与其他类相同的引号内