Question

我在css上遇到麻烦，如何在一个有边框保持内部和水平的div中制作我的内容。当列用尽其内容时，列和内容向下移动。我希望它们保持水平和可读性，而不是向下移动。

最小化屏幕宽度之前的图片：

最小化屏幕宽度后的图片：

正如你所看到的，里面的内容并不存在!!

这是我的html和一些css：

＆＃13;

<div class="container3" style="">
	<div class="row">	
		<div class="col-md-11" style="min-width:760px;">
			<div class="panel panel-default" style="">
				
				<div class="panel-heading" >
					<div >
						<h style="margin-left:40px;">Your Requests </h>
					</div>
					
					<div style="float:right;margin-top:-30px;">Total: $<div id="sum" style="float:right;"> </div>
					
					</div>

				</div>
				
				<% @revisers.each do |reviser| %>
				<% reviser.reservations.where("status = ?", true).each do |reservation| %>

<script>
							
							var total = <%= reviser.reservations.where("status = ?", true).sum(:total) %>;
							$('#sum').html(total);
					
					</script>
				<div class="panel-body" style="">
					<div class="col-md-12" style="border:3px solid black;height:108px;max-height:108px;min-width:703px;overflow:hidden;">

						<!-- first column -->
						<div class="row" style="">


							<div class="col-sm-3 center" style="">
								<div style="margin-left:-45px;">
									<%= reservation.reviser.essay_type %>
								</div>
							</div>


							<div class="col-sm-2 center" >
								<div style=" margin-left:-40px;">
									File
								</div>
							</div>
							<div class="col-sm-2 center" >
							<div style="margin-left:35px;">
								Due
							</div>
								
							</div>
							<div class="col-sm-2 center" >
							<div style="margin-left:70px;">
								File
							</div>
								

							</div>
							<div class="col-sm-2 center" style="">
								<div style="margin-left:110px;">
									Total
								</div>
							</div>
						</div>

						<!-- second column -->


						<div class="row" style="">
							<div class="col-sm-2" style="">
								<div style="margin-left:20px;">
									<%= render 'shared/essayicons', reviser: reservation.reviser %>
								</div>
							</div>


							<div class="col-sm-1" >
								<li class="thumbnail2" style=""><%= image_tag(reservation.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
							</div>
							<div class="col-sm-1 center" style="margin-top:10px;">
								<div class="row">
									<div style="color:green;margin-left:10px;">
										sent
									</div>
								</div>
								<div class="row">
									--->
								</div>
							</div>
							<div class="col-sm-1">

								<li class="thumbnail2"><%= image_tag(reservation.reviser.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>

							</div>
							<div class="col-sm-2 center">
								<%= reservation.due_date %>

							</div>

							<div class="col-sm-1">
								<li class="thumbnail2"><%= image_tag(reservation.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>

							</div>


							<div class="col-sm-1 center" style="margin-top:10px;">
								<div class="row">
									<div style="color:green;margin-left:10px;">
										sent
									</div>
								</div>
								<div class="row">
									<---
								</div>

							</div>
							<div class="col-sm-1">
								<li class="thumbnail2"><%= image_tag(reservation.reviser.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
							</div>
							<div class="col-sm-1 center" style="margin-left:30px;">
								<h4>$<%= reservation.total %></h4>
							</div>

						</div>
						<!-- 	Third Column -->

						<div class="row" style="">
							<div class="col-sm-2 center">
							<div>
								<%= time_ago_in_words(reservation.created_at) %> ago
							</div>
								
							</div>


							<div class="col-sm-2 center" style="">
							<div style="margin-left:-45px;">
								<%= reservation.user.username %>
							</div>
								
							</div>

							<div class="col-sm-2 center">
							<div style="margin-left:-40px;">
								<%= reservation.reviser.user.username %>
							</div>
								
							</div>
							<div class="col-sm-2 center" >
							<div style="margin-left:70px;">
								<%= reservation.user.username %>
							</div>
								
							</div>

							<div class="col-sm-2 center" >
							<div style="margin-left:50px;">
								<%= reservation.reviser.user.username %>
							</div>
								
							</div>

						</div>





					</div>
				</div>
				<% end %>
				<% end %>




			</div>
		</div>		
	</div>
</div>

＆＃13;

SCSS文件：

＆＃13;

.container3{
  margin:auto;
  width:80%;

}

.panel {
  border-radius: 8px;
}

.panel-default .panel-heading {
    color: #565a5c;
    background-color: #edefed;
    font-size: 18px;
    font-weight: 400;

}

.panel-heading{
  margin:0 auto;
  
  
  h1 {
    
    text-align: center;
  }
}

.panel-body{

  margin-top: 0px;
}

＆＃13;

我怎样才能让这些divs停止在彼此之下移动？只是保持它们的放置，如果有人减少了屏幕宽度，那么除非用户再次扩展屏幕，否则它们将不会显示在屏幕上，就像total附近的标题上的Your Requests不是这样的当我最小化屏幕时出现在某一点。谢谢!! ^^

Answer 1

只需将.hidden-xs和.hidden-sm添加到有问题的col-md-* div

http://getbootstrap.com/css/#responsive-utilities

内部divs移动最小化屏幕的宽度

1 个答案: