当我减少浏览器宽度时，我的col div似乎会增加

Question

我遇到了当前col的问题。每当我达到最小化浏览器屏幕宽度的某个点时，大小就会增加。我不介意设置一个固定的大小，但上次我改为固定;右侧的文本与配置文件框合并。

在

在

在开头col-md-4是个人资料图片和信息的灰色容器。

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

<div class="" style="">
		<div class="col-md-4"  style="background-color:#DDDDDD;height:100%;border-radius: 4px;">
			<!-- Make an if statement for online and offline -->

		<div class="row center">
<% if @user.online? %>
<div class="btn btn-block" id="available">
				Online Now
			</div>
			<% else %>
			<div class="btn btn-block" id="unavailable" style="background-color:#990000;">
				Offline
			</div>
			<% end %>

			<div id="contain-pic">
				<div class="thumbnail" style="width:300px;height:300px;overflow:hidden;background-color:black;">
					<%= image_tag @user.avatar.url(:medium), :id => "image-tag", class: "portrait" %>

				</div>
				</div>
				<div id="average_rating"></div>
				<script>
	$('#average_rating').raty({
		path: '/assets',
		readOnly: true,
		score: <%= @user.reviews.average(:star) %>
	});
</script>

			</div>

			<div class="row " style="margin-left:20px;">
			
				<div class="row" >
					<div class="col-md-3" >
						<h2 style="font-size:20px;margin:0 auto;">Country:</h2>
					</div>
					<% if @user.country != nil %>
					<div class="col-md-8" style="margin-left:30px;">
						<h><%= @user.country %></h>
					</div>
					<% else %>
					<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
						<h>N/A</h>
					</div>
				<% end %>
				</div>
				

				<div class="row">
					<div class="col-md-3">
						<h2 style="font-size:20px;margin:0 auto;">University:</h2>
					</div>
					<% if @user.school != nil %>
					<div class="col-md-8" style="margin-left:30px;">
						<h><%= @user.school %></h>
					</div>
					<% else %>
					<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
						<h>N/A</h>
					</div>
					
				<% end %>
				</div>
				
<% if @user.major != nil %>
				<div class="row">
					<div class="col-md-3">
						<h2 style="font-size:20px;margin:0 auto;">Major:</h2>
					</div>
					<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
						<h><%= @user.major %></h>
					</div>
				</div>
				<% end %>
<% if @user.occupation != nil %>
				<div class="row" >
					<div class="col-md-3" >
						<h2 style="font-size:20px;margin:0 auto;margin-right:10px;">Occupation:</h2>
					</div>
					<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
						<h style=""><%= @user.occupation %></h>
					</div>
				</div>
				<% end %>
<% if @user.company_name != nil %>
				<div class="row" >
					<div class="col-md-3" >
						<h2 style="font-size:20px;margin:0 auto;">Company:</h2>
					</div>
					<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
						<h><%= @user.company_name %></h>
					</div>
				</div>
				<% end %>

			</div>


		</div>

</div>

		<div class="col-md-8">

			<div class="row">

				<div class="col-md-4">
					<h2 style="font-size:40px;"> <%= @user.username %></h2>
				</div>

				<div class="col-md-4">
					<div class="msg-btn">
						<%= link_to 'Send message', new_message_path(to: @user.id), class: 'btn btn-primary' %>
					</div>
				</div>


				<div class="row col-md-10" style="height:150px;max-height:300px;margin-left:75px;margin-top:20px;">
				<label style="font-weight:bold;font-size:20px;">About Me</label>
					<div class="description" style="overflow:auto;height:130px;max-height:130px;">
					<% if @user.description != nil %>
						<%= @user.description %>
						<% else %>
						<p> There is no description...... </p>
						<% end %>
					</div>
				</div>

			</div>


			<div class="row col-md-12" style="height:230px;max-height:270px;margin-top:15px;" id="introduction">

				<div class="col-md-6">
					<% if @user.school_description != nil %>
					<h3> School Experience </h3>

					<p><%= @user.school_description %></p>
					<% else %>

					<% end %>

				</div>

				<div class="col-md-6">
					<% if @user.occupation_details != nil %>
					<h3> Job Experience </h3>

					<p><%= @user.occupation_details %></p>
					<% else %>

					<% end %>
				</div>
			</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;">
		<% @user.revisers.each do |reviser| %>
		<%= link_to reviser do %>
		<div class="col-sm-6">

		<div style="border: 3px solid grey;width:300px;max-width:300px;height:165px;max-height:165px;margin:10px;">

				<div>
				<div class="row">
					<h2 style="color:black;" class="center"><%= reviser.try(:essay_type) %></h2>
					</div>
					<div class="row">
					<div class="col-sm-3">
					<%= render 'shared/essayicons', reviser: reviser %>
					</div>
					<div class="col-sm-3">
						
					</div>
					</div>
					
				</div>


		</div>
		</div>
		<% end %>
		<% end %>
		</div>

</div>
<div class="col-md-12" style="margin-top:20px;margin-bottom:40px;">
	<h4>Reviews</h4>
	<% @revisers.each do |reviser| %>
	<% if !reviser.reviews.blank? %>

		<% reviser.reviews.each do |review| %>
		<div class="row">
			<div class="col-md-2 text-center">
			<%= image_tag review.user.avatar.url(:medium), :id => "image-tag", class: "img-circle thumbnail2" %><br>
			<%= review.user.username %>	
			</div>
			<div class="col-md-10">
				<%= link_to reviser.essay_type, reviser %><br>
				<%= review.comment %><br>
				<%= review.created_at.strftime("%v") %>
			</div>
		</div>
		<% end %> 
	<% end %>
	<% end %>
</div>
		</div>
	</div>

</div>




</div>

Answer 1

看起来您正在使用Bootstrap样式，例如。 `class =“col-md-8”，这是告诉你的列在达到特定窗口宽度时调整大小。

如果你到这里：http://v4-alpha.getbootstrap.com/layout/grid/#grid-options，你可以看到列'破碎'和重新调整大小的屏幕尺寸。您可以根据需要调整这些列网格数（例如，来自class="col-md-8" to class =“col-md-6”）。

听起来你可能会遇到嵌套div标签错误的问题，如果它们是你想要的那样重叠的话。