Html 适用于所有设备的响应引导4列

我正在为所有设备制作一个响应性的配置文件页面，因此我使用bootstrap 4网格系统根据我的需要划分页面。我希望该页面的外观如下：-在台式机中以及类似的情况下：-

因此，我尝试的是在小屏幕上负责任地工作 代码片段

/*配置文件主页卡、支架等*/
霍尔德提尔先生{
字体系列：hana；
字体大小：34px！重要；
颜色：黑色！重要；
文本对齐：居中！重要；
}
/*配置文件图像Thubmail*/
.虚拟人物简介{
边框：1px实心#ddd；/*灰色边框*/
边框半径：4px；/*圆形边框*/
填充：5px；/*一些填充*/
宽度：150px；/*设置一个小宽度*/
}
/*添加悬停效果（蓝色阴影）*/
.虚拟人物：悬停{
盒影：0.02×1×rgba（0.140、186、0.5）；
}
.holderText{
颜色：黑色！重要；
}
.messagebtn{
文本对齐：居中！重要；
字体系列：hana！重要；
}
fontawsomeBIO先生{
字体系列：hana！重要；
}
/* 
##设备=台式机
##屏幕=1281px到更高分辨率的桌面（大Mointer）
*/
@介质（最小宽度：1281px）{
/*大屏幕上的轮廓仪卡和容器（轮廓支架）*/
.profileholder{
宽度：45%；
高度：自动；
}
/*档案夹到此结束*/
/*配置文件内容卡和容器*/
.ProfileContent{
宽度：100%；
高度：自动；
}
}
/* 
##设备=笔记本电脑、台式机
##屏幕=B/w 1025px至1280px
*/
@介质（最小宽度：1025px）和（最大宽度：1280px）{
.档案夹{
宽度：70%；
高度：自动；
}
/*档案夹到此结束*/
/*配置文件内容卡和容器*/
.ProfileContent{
宽度：100%；
高度：自动；
}	
}
/* 
##设备=平板电脑、iPad（纵向）
##屏幕=B/w 768px至1024px
*/
@介质（最小宽度：768px）和（最大宽度：1024px）{
.档案夹{
宽度：95%；
高度：自动；
}
/*档案夹到此结束*/
/*配置文件内容卡和容器*/
.ProfileContent{
宽度：100%；
高度：自动；
}	
}
/* 
##设备=平板电脑、iPad（横向）
##屏幕=B/w 768px至1024px
*/
@介质（最小宽度：768px）和（最大宽度：1024px）以及（方向：横向）{
.档案夹{
宽度：75%；
高度：自动；
}
/*档案夹到此结束*/
/*配置文件内容卡和容器*/
.ProfileContent{
宽度：100%；
高度：自动；
}	
}
/* 
##设备=低分辨率平板电脑、手机（横向）
##屏幕=B/w 481px至767px
*/
@介质（最小宽度：481px）和（最大宽度：767px）{
.档案夹{
宽度：85%；
高度：自动；
}
/*档案夹到此结束*/
/*配置文件内容卡和容器*/
.ProfileContent{
宽度：90%；
高度：自动；
}
}
/* 
##设备=大多数智能手机手机（纵向）
##屏幕=B/w 320px至479px
*/
@介质（最小宽度：320px）和（最大宽度：480px）{
.档案夹{
宽度：100%；
高度：自动；
}
/*档案夹到此结束*/
/*配置文件内容卡和容器*/
.ProfileContent{
宽度：100%；
高度：自动；
}	
}

响应剖面


الإسم




“内容在此”选项卡面板…等

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

• 超小型设备（肖像手机，小于576px）无媒体查询 因为这是引导中的默认值
• 小型设备（横向手机，576px及以上）@媒体（最小宽度： 576px）{…}
• 介质设备（平板电脑、768px及以上）@介质（最小宽度：768px）{ …}
• 大型设备（台式机、992px及以上）@媒体（最小宽度：992px）{ …}
• 超大设备（大型台式机、1200px及以上）@media （最小宽度：1200px）{…}

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

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