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 -__' –