私のブラウザの幅を小さくすると、私のcol divのサイズが大きくなるようです。

Question

私の現在の色に問題があります。私は、ブラウザ画面の幅を最小限にする特定のポイントに達するとサイズが大きくなります。私は決まったサイズを設定しても構いませんが、前回は固定に変更しました。右側のテキストがプロファイルボックスとマージされました。開始COL-MD-4で

後

前

は、プロフィール写真や情報の灰色の容器です。

<div class="container3" style="padding-top:50px;min-width: 1100px;" > 
 
<div id=""> 
 
\t <div class="row" style="" > 
 

 
<div class="" style=""> 
 
\t \t <div class="col-md-4" style="background-color:#DDDDDD;height:100%;border-radius: 4px;"> 
 
\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> 
 

 
</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> 
 

 

 

 

 
</div>

Answer 1

あなたが例えば、ブートストラップスタイリングを使用しているように見えます。 `class =" col-md-8 "です。これは、特定のウィンドウ幅に達したときにサイズを変更するようにカラムを指示するものです。

ここにお越しの場合：http://v4-alpha.getbootstrap.com/layout/grid/#grid-options、あなたはどのスクリーンサイズで 'ブレーク'とサイズの変更を見ることができます。必要に応じて、列のグリッド番号（例：class="col-md-8" to class = "col-md-6"）を調整することができます。

重複しているdivタグが間違っていると問題が発生する場合があります。