1
您好我想在最小化屏幕宽度时将我的列保留在相同的位置。我怎样才能让div移动到底部？有没有办法让它保持在那个位置，这样用户必须向右或向左滚动才能看到最小化时的其余部分？例如，当您创建一个问题时，右侧会出现一个名为“类似问题”的框，当我将框的宽度最小化时，该框保持在该位置并隐藏，直到您滚动到右侧。在最小化浏览器宽度时在前一列下移动的div col
之前 
后 
Html页面
<div class="container3" style="padding-top:50px;" >
\t <div class="row" style="" >
\t \t <div class="col-md-4" style="background-color:#DDDDDD;height:100%;border-radius: 4px;min-width:360px;">
\t \t \t <!-- Make an if statement for online and offline -->
\t \t <div class="row center">
<% if @user.online? %>
<div class="btn btn-block" id="available">
\t \t \t \t Online Now
\t \t \t </div>
\t \t \t <% else %>
\t \t \t <div class="btn btn-block" id="unavailable" style="background-color:#990000;">
\t \t \t \t Offline
\t \t \t </div>
\t \t \t <% end %>
\t \t \t <div id="contain-pic">
\t \t \t \t <div class="thumbnail" style="width:300px;height:300px;overflow:hidden;background-color:black;">
\t \t \t \t \t <%= image_tag @user.avatar.url(:medium), :id => "image-tag", class: "portrait" %>
\t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div id="average_rating"></div>
\t \t \t \t <script>
\t $('#average_rating').raty({
\t \t path: '/assets',
\t \t readOnly: true,
\t \t score: <%= @user.reviews.average(:star) %>
\t });
</script>
\t \t \t </div>
\t \t \t <div class="row " style="margin-left:20px;">
\t \t \t
\t \t \t \t <div class="row" >
\t \t \t \t \t <div class="col-md-3" >
\t \t \t \t \t \t <h2 style="font-size:20px;margin:0 auto;">Country:</h2>
\t \t \t \t \t </div>
\t \t \t \t \t <% if @user.country != nil %>
\t \t \t \t \t <div class="col-md-8" style="margin-left:30px;">
\t \t \t \t \t \t <h><%= @user.country %></h>
\t \t \t \t \t </div>
\t \t \t \t \t <% else %>
\t \t \t \t \t <div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
\t \t \t \t \t \t <h>N/A</h>
\t \t \t \t \t </div>
\t \t \t \t <% end %>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="row">
\t \t \t \t \t <div class="col-md-3">
\t \t \t \t \t \t <h2 style="font-size:20px;margin:0 auto;">University:</h2>
\t \t \t \t \t </div>
\t \t \t \t \t <% if @user.school != nil %>
\t \t \t \t \t <div class="col-md-8" style="margin-left:30px;">
\t \t \t \t \t \t <h><%= @user.school %></h>
\t \t \t \t \t </div>
\t \t \t \t \t <% else %>
\t \t \t \t \t <div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
\t \t \t \t \t \t <h>N/A</h>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t <% end %>
\t \t \t \t </div>
\t \t \t \t
<% if @user.major != nil %>
\t \t \t \t <div class="row">
\t \t \t \t \t <div class="col-md-3">
\t \t \t \t \t \t <h2 style="font-size:20px;margin:0 auto;">Major:</h2>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
\t \t \t \t \t \t <h><%= @user.major %></h>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <% end %>
<% if @user.occupation != nil %>
\t \t \t \t <div class="row" >
\t \t \t \t \t <div class="col-md-3" >
\t \t \t \t \t \t <h2 style="font-size:20px;margin:0 auto;margin-right:10px;">Occupation:</h2>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
\t \t \t \t \t \t <h style=""><%= @user.occupation %></h>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <% end %>
<% if @user.company_name != nil %>
\t \t \t \t <div class="row" >
\t \t \t \t \t <div class="col-md-3" >
\t \t \t \t \t \t <h2 style="font-size:20px;margin:0 auto;">Company:</h2>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
\t \t \t \t \t \t <h><%= @user.company_name %></h>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <% end %>
\t \t \t </div>
\t \t </div>
\t \t <div class="col-md-8">
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-4">
\t \t \t \t \t <h2 style="font-size:40px;"> <%= @user.username %></h2>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-4">
\t \t \t \t \t <div class="msg-btn">
\t \t \t \t \t \t <%= link_to 'Send message', new_message_path(to: @user.id), class: 'btn btn-primary' %>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="row col-md-10" style="height:150px;max-height:300px;margin-left:75px;margin-top:20px;">
\t \t \t \t <label style="font-weight:bold;font-size:20px;">About Me</label>
\t \t \t \t \t <div class="description" style="overflow:auto;height:130px;max-height:130px;">
\t \t \t \t \t <% if @user.description != nil %>
\t \t \t \t \t \t <%= @user.description %>
\t \t \t \t \t \t <% else %>
\t \t \t \t \t \t <p> There is no description...... </p>
\t \t \t \t \t \t <% end %>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="row col-md-12" style="height:230px;max-height:270px;margin-top:15px;" id="introduction">
\t \t \t \t <div class="col-md-6">
\t \t \t \t \t <% if @user.school_description != nil %>
\t \t \t \t \t <h3> School Experience </h3>
\t \t \t \t \t <p><%= @user.school_description %></p>
\t \t \t \t \t <% else %>
\t \t \t \t \t <% end %>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-6">
\t \t \t \t \t <% if @user.occupation_details != nil %>
\t \t \t \t \t <h3> Job Experience </h3>
\t \t \t \t \t <p><%= @user.occupation_details %></p>
\t \t \t \t \t <% else %>
\t \t \t \t \t <% end %>
\t \t \t \t </div>
\t \t \t </div>
<div class="col-md-12">
<div class="row center">
<h2 >I am available to revise these types of papers</h2>
</div>
<div class="row" style="margin-top:30px;">
\t \t <% @user.revisers.each do |reviser| %>
\t \t <%= link_to reviser do %>
\t \t <div class="col-sm-6">
\t \t <div style="border: 3px solid grey;width:300px;max-width:300px;height:165px;max-height:165px;margin:10px;">
\t \t \t \t <div>
\t \t \t \t <div class="row">
\t \t \t \t \t <h2 style="color:black;" class="center"><%= reviser.try(:essay_type) %></h2>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="row">
\t \t \t \t \t <div class="col-sm-3">
\t \t \t \t \t <%= render 'shared/essayicons', reviser: reviser %>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-sm-3">
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t </div>
\t \t </div>
\t \t </div>
\t \t <% end %>
\t \t <% end %>
\t \t </div>
</div>
<div class="col-md-12" style="margin-top:20px;margin-bottom:40px;">
\t <h4>Reviews</h4>
\t <% @revisers.each do |reviser| %>
\t <% if !reviser.reviews.blank? %>
\t \t <% reviser.reviews.each do |review| %>
\t \t <div class="row">
\t \t \t <div class="col-md-2 text-center">
\t \t \t <%= image_tag review.user.avatar.url(:medium), :id => "image-tag", class: "img-circle thumbnail2" %><br>
\t \t \t <%= review.user.username %> \t
\t \t \t </div>
\t \t \t <div class="col-md-10">
\t \t \t \t <%= link_to reviser.essay_type, reviser %><br>
\t \t \t \t <%= review.comment %><br>
\t \t \t \t <%= review.created_at.strftime("%v") %>
\t \t \t </div>
\t \t </div>
\t \t <% end %>
\t <% end %>
\t <% end %>
</div>
\t \t </div>
\t </div>
</div>
嘿谢谢你！我的个人资料图片容器似乎也是一个问题。当我最小化宽度时，容器似乎填满了屏幕，而我侧面的文本因此移动到底部。 –
我假设你正在使用引导，如果是这样，所有这些元素与'col-md -__'将做你所描述的。 'md'部分表示媒体，并且说当屏幕宽度低于某个宽度时（我无法完全记得md是什么），它会停止显示百分比并切换到100％。如果您希望断点更小，请尝试将questiom中的类更改为'col-sm -__'或甚至'col-xs -__' –