时间戳

首页 > 解决方案 > 适用于所有设备的响应式引导程序 4 列

html - 适用于所有设备的响应式引导程序 4 列

问题描述

我正在为所有设备开发一个响应式配置文件页面，所以我使用 bootstrap 4 网格系统来划分页面以满足我的需要我希望页面看起来像这样：-这个在桌面中，像这样：-这个

所以我尝试的是 col-sm 负责任地使用小屏幕代码片段

/* Profile Main Page Cards , holders...etc */
.holderTitle{
	font-family: hana;
	font-size: 34px !important;
	color:black !important;
	text-align: center !important;
}
/* Profile Image Thubmail */
.ProfileAvatar{
	border: 1px solid #ddd; /* Gray border */
	border-radius: 4px;  /* Rounded border */
	padding: 5px; /* Some padding */
	width: 150px; /* Set a small width */
  }
  /* Add a hover effect (blue shadow) */
.ProfileAvatar:hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
  }
.holderText{
	color:black !important;
}
.messagebtn{
	text-align: center !important;
	font-family: hana !important;
}
.fontawsomeBIO{
	font-family: hana !important;
}




/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops  ( large Mointer )
*/

@media (min-width: 1281px) {
	/* Profiler Card and Container (Profile Holder) on large Screen */
	.profileholder{ 
		width:45%;
		height: auto;
	}
	/* ProfileHolder Ends Here */
	/* Profile Content Card And Container  */
	.ProfileContent{
		width: 100%;
		height: auto;
	}
  }
  
  /* 
	##Device = Laptops, Desktops
	##Screen = B/w 1025px to 1280px
  */
  
  @media (min-width: 1025px) and (max-width: 1280px) {
	
	.profileholder{
		width:70%;
		height: auto;
	}
	/* ProfileHolder Ends Here */
	/* Profile Content Card And Container  */
	.ProfileContent{
		width: 100%;
		height: auto;
	}	
  }
  
  /* 
	##Device = Tablets, Ipads (portrait)
	##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) {
	
	.profileholder{
		width:95%;
		height: auto;
	}
	/* ProfileHolder Ends Here */
	/* Profile Content Card And Container  */
	.ProfileContent{
		width: 100%;
		height: auto;
	}	
  }
  
  /* 
	##Device = Tablets, Ipads (landscape)
	##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.profileholder{
		width:75%;
		height: auto;
	}
	/* ProfileHolder Ends Here */
	/* Profile Content Card And Container  */
	.ProfileContent{
		width: 100%;
		height: auto;
	}	
  }
  
  /* 
	##Device = Low Resolution Tablets, Mobiles (Landscape)
	##Screen = B/w 481px to 767px
  */
  
  @media (min-width: 481px) and (max-width: 767px) {
	.profileholder{
		width:85%;
		height: auto;
	}
	/* ProfileHolder Ends Here */
	/* Profile Content Card And Container  */
	.ProfileContent{
		width: 90%;
		height: auto;
	}
  }
  
  /* 
	##Device = Most of the Smartphones Mobiles (Portrait)
	##Screen = B/w 320px to 479px
  */
  
  @media (min-width: 320px) and (max-width: 480px) {
	.profileholder{
		width:100%;
		height: auto;
	}
	/* ProfileHolder Ends Here */
	/* Profile Content Card And Container  */
	.ProfileContent{
		width: 100%;
		height: auto;
	}	
  }
<html>
<head>
<title>Responsive Profile</title>
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!-- Bootstrap CDN Font-awesome -->
</head>
<body>
<!-- Bootstrap Jquery JavaScripts  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts  -->
<div class="row">
		<div class="col-sm-6">
			<div class="container">
				<br>
				<div class="card profileholder">
					<img class="card-img-top ProfileAvatar" src="..\upload\tmp\img.jpg" alt="alt"></img>
					<div class="card-body">
						<h4 class="card-title holderTitle">الإسم</h4><br><br>
						<a name="PMbutton" id="private" class="btn btn-danger btn-block messagebtn" href="#" role="button">رسالة</a>
						<a name="d" id="ds" class="btn btn-dark btn-block messagebtn" href="#" role="button">متابعة</a>
						<i class="fas fa-map-marker-alt fas-3x" aria-hidden="true"></i>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-auto">
		<br>
			<div class="card ProfileContent">
				<div class="card-body">
				Content Here tab panel....etc
				</div>
			</div>
		</div>
	</div>
</body>
建议：- 在整页中显示代码

至少最重要的是 col-sm-auto <--- 标签下的正确容器包含一个选项卡面板该面板将有超过 4 个选项卡，这对于智能手机中的所有屏幕宽度来说非常适合，因此面板将有一个 x 滚动任何建议以使其响应。

标签： htmlcsstwitter-bootstrap

解决方案

Bootstrap 为您提供了一些内置的媒体查询，您可以通过这些查询来定义您的布局。

  • 超小型设备（纵向手机，小于 576 像素） 无媒体查询，因为这是 Bootstrap 中的默认设置
  • 小型设备（横向手机，576px 及以上）@media (min-width: 576px) { ... }
  • 中型设备（平板电脑，768px 及以上）@media (min-width: 768px) { ... }
  • 大型设备（台式机，992px 及以上）@media (min-width: 992px) { ... }
  • 超大型设备（大型桌面，1200px 及以上）@media (min-width: 1200px) { ... }

您可以使用移动优先的方法来设计您的布局。从 0px 到 575px 将首先声明，而不是随着分辨率的提高，您可以使用媒体查询来处理您的布局。col-sm-6 类使您能够连续使用 6 个列。如果您希望在大型桌面设计中将该 col 缩小到 4，您可以在 col-sm-6 之外添加 col-lg-4。通过这种方式，您的设计将变得响应。

在此处输入图像描述

就选项卡面板而言，这取决于您的设计。您还可以应用嵌套技术或媒体列表方法来处理不同分辨率的设计。请考虑引导文档以获得完整的指导。您也可以将 col-sm-auto 更改为 col-sm-6。

推荐阅读