html - 如何通过媒体查询提前打破列？-6ren

html - 如何通过媒体查询提前打破列？

转载作者：行者123 更新时间：2023-11-28 00:11:42

25

4

我在我的元素中使用了这段代码。我希望卡片在其正常断点之前断开。我尝试在窗口大小为 700 像素时断开卡片。但它保持不变，如何做到这一点？谁能帮我？在此先感谢您的帮助:)

<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
   	<!--jQuery library--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--Latest compiled and minified JavaScript--> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .card-body {
			padding: 0 !important;
		}
		.card-content {
			padding: 1.25rem;
		}
    </style>
</head>
<body>
 	<div class="row my-4">
    	<div class="col">
        	<div class="container-fluid">
          		<div class="row">
            		<div class="col-sm d-flex">
	            		<div class="card card-body flex-fill">
	              			<div class="card-header"><center>Education</center></div>
	              			<div class="card-content">
					            <h5 class="card-title">● hello hello hello hello hello 2019</h5>
					        	<p class="card-text"><br>blah blah blah blah blah blah blah</p>
								<h5 class="card-title"> ●hello hello hello hello helooo</h5>
					        	<p class="card-text">something...................................................</p>
								<h5 class="card-title"> ● hello hello hello hello hello</h5>
					        	<p class="card-text">sometthing here........................</p>
	    					</div>
              			</div>
            		</div>
			        <div class="col-sm d-flex">
			            <div class="card card-body flex-fill">
				            <div class="card-header"><center>Traings & Online Courses</center></div>
					        <div class="card-content">
						        <h5 class="card-title">TRAINING</h5>
								<p class="card-text">● .........................................................<br> ● ..............................................</p>
								<h5 class="card-title">ONLINE COURSE 2015</h5>
								<p class="card-text">● blah blah blah blah..... <br>
								●blah blah blah blah blah.</p>
								<h5 class="card-title">ONLINE COURSE 2015</h5>
							</div>
				        </div>
			        </div>
			    </div>
        	</div>
    	</div>
    </div>
</body>
</html>

最佳答案

看看这个

 
        .card-body {
			padding: 0 !important;
		}
		.card-content {
			padding: 1.25rem;
		}
   @media only screen and (max-width: 992px) {
    #edu1 .card {width:700px;height:700px;background:red;}
}

<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
   	<!--jQuery library--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--Latest compiled and minified JavaScript--> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .card-body {
			padding: 0 !important;
		}
		.card-content {
			padding: 1.25rem;
		}
    </style>
</head>
<body>
 	<div class="row my-4">
    	<div class="col">
        	<div class="container-fluid">
          		<div class="row">
            		<div class="col-sm d-flex " id="edu1">
	            		<div class="card card-body flex-fill">
	              			<div class="card-header"><center>Education</center></div>
	              			<div class="card-content">
					            <h5 class="card-title">● hello hello hello hello hello 2019</h5>
					        	<p class="card-text"><br>blah blah blah blah blah blah blah</p>
								<h5 class="card-title"> ●hello hello hello hello helooo</h5>
					        	<p class="card-text">something...................................................</p>
								<h5 class="card-title"> ● hello hello hello hello hello</h5>
					        	<p class="card-text">sometthing here........................</p>
	    					</div>
              			</div>
            		</div>
			        <div class="col-sm d-flex" id="edu2">
			            <div class="card card-body flex-fill">
				            <div class="card-header"><center>Traings & Online Courses</center></div>
					        <div class="card-content">
						        <h5 class="card-title">TRAINING</h5>
								<p class="card-text">● .........................................................<br> ● ..............................................</p>
								<h5 class="card-title">ONLINE COURSE 2015</h5>
								<p class="card-text">● blah blah blah blah..... <br>
								●blah blah blah blah blah.</p>
								<h5 class="card-title">ONLINE COURSE 2015</h5>
							</div>
				        </div>
			        </div>
			    </div>
        	</div>
    	</div>
    </div>
</body>
</html>

关于html - 如何通过媒体查询提前打破列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55361009/

25

4

0

文章推荐： c++ - 错误 124 - SHFileOperation 的系统调用级别不正确

文章推荐： javascript - 从 JSON : P5. js 中提取信息

文章推荐： c++ - 选择适当的FIFO数据结构

文章推荐： javascript - 在d3js中连接两个矩形

algorithm - 事件的时间顺序以及事件的运行评论*提前*
如果这有点含糊，我提前道歉，但我什至缺乏如何处理这个问题的基本想法 - 甚至不知道是否有合适的术语可供搜索。我正在尝试编写一个按时间顺序排列的动画事件的表格驱动系统，其中描述性评论也从表格中提取出来
python 提前 for 循环
我是一个老狗，30 年前就用过 BASIC >。我以前在 python 中使用 for 循环时遇到过这种情况，但我选择这个例子是因为我担心循环: 我想解析一个长字符串，其中包含用逗号分隔的双引号中的单
javascript - 提前 5 个工作日
我需要获取从当天算起的 5 个工作日的数组。今天是:06/04/2018 我需要的输出是: { 0: 06/01/2018, //fri. 1: 05/31/2018, //th
mysql - 提前 5 天
我习惯于使用时间戳，我现在将尝试使用正常日期 2011-02-02 12:00:00 格式我有这个: SELECT * FROM users_calenders WHERE date ? 我想选择日
主和分支之间的 git 提前/落后信息？
我在我的本地仓库 (test-branch) 中创建了一个测试分支，并将其推送到 Github。如果我转到我的 Github 帐户并选择这个 test-branch 它会显示信息: This bra
JavaScript 日期，提前 30 天获取
我正在尝试设置 JSON 对象的结束日期。结束日期等于开始日期后 30 天。有时这会返回正确的日期，有时则不会。这是GetDateSchedulerFormatted函数 GetDateSchedu
java - 提前/快速启动 ScheduledThreadPoolExecutor 中的任务
我有一个执行器服务，它定期执行一堆任务。它们在启动时初始化并经常运行，到目前为止一切顺利。我现在想添加功能来根据事件快速启动这些任务的执行。我找到了decorateTask方法，它允许我存储我安排
ios:提前 3 周(按日期)
我需要比当前日期提前 3 周的日期。并将所有日期添加到数组中。我怎样才能得到这个？ let date = NSDate() let calendar = NSCalendar(cal
iphone - NSDate 提前 1 小时？
我正在使用以下代码设置日期对象: NSDate *date = [NSDate date]; NSCalendar *gregorian = [[NSCalendar alloc] i
ios - NSDateFormatter 提前 4 小时给我时间
我正在将字符串“Jun 11, 2012 9:30 PM”转换为 NSDate，并且由于某种原因我一直提前 4 小时。有趣的是，我正在使用相同的字符串在详细 View 中提供 UIDatePicker
ios - Xamarin 提前 (AOT) 编译器与普通编译器
我的理解是 Xamarin 的提前 (AOT) 编译器将 Xamarin.iOS 应用程序直接编译为 native ARM 汇编代码 (How Xamarin works) . 然而，我不明白的是为什
javascript - Angular2 提前 (AoT) 编译如何工作？
Angular 2 带有称为提前 (AoT) 的新功能。但是看了一番，还是不能真正理解。它是如何工作的？它将如何带来更好的性能？它与 JIT 有何不同？谢谢。最佳答案 Angular 在模块、指令
c# - DateTime.UtcNow 提前 4 小时
我看到了一些关于如何纠正这个问题的答案。我有一个 DateTime 类型的对象。我已分配该对象，如下所示。 obj.TimeStamp = DateTime.UtcNow; 我似乎找不到正确的组合或代
fortran - 提前 ='no' 在 Fortran 中意味着什么？
我是 Fortran 新手，我不明白这一行: write(*,'(a35)', advance='no') 在: program democonvertion implicit none
android - 如何为 Android View 提前 "listing"
我一直在寻找如何做一些像 facebook 新闻提要这样的“高级”列表，但我认为我没有使用正确的关键字来搜索如何做到这一点。我对 android 环境还是很陌生。这就是我要实现的目标: 我怎样才能得
python - 提前 7 天从一列移动数据 - pandas Dataframe
我有一个包含 2 列的 pandas Dataframe。其中一个是日期格式的索引，另一个是比率 R(0 到 1 之间的数字)。如何向 pandas Dataframe 添加另一列，其中包含一天前一周
css - OSX Safari 提前 15 像素应用媒体查询
我有 2 个媒体查询大小 - only screen and (min-width: 980px)and (max-width: 1499px)"; only screen and (min-widt
android - aot(提前)可用于 android 的单声道吗？
我发现了这个: Is AOT (ahead of time) compilation available (or planned) in mono for android? 但是这个问题很老了。在单
java - 如何扩展 JTree 节点(提前)，但保持它们不可见
在我看来，当我调用 JTree.expandPath( path ) 默认情况下，它的所有父级也会展开。但我真正想做的是，设置特定的隐形 child 提前展开。这样当一个节点展开时，它的完整子树就会弹
Java Date 给出的时差不正确，提前 1 小时
我的时差显示不正确的输出，我正在尝试计算 startTime 和 endTime 之间的时差。 Date time1, time2; long difference; Simp

首页

博学

6Ren·AI

商城

html - 如何通过媒体查询提前打破列？