как разбить столбец раньше по медиа-запросу?

#html #css #twitter-bootstrap #twitter-bootstrap-3 #bootstrap-4

#HTML #css #twitter-bootstrap #twitter-bootstrap-3 #bootstrap-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 amp; 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>  

Комментарии:

1. Вы пробовали media-query ? Укажите пользовательский класс для вашего column и примените к нему css. В конкретных media-query

2. @AbdulBasit да, я добавляю идентификатор в <div class=»col-sm d-flex»> и применяю медиа-запрос к этому идентификатору . но это не удается. думаю, я допустил какую-то ошибку

3. не могли бы вы, пожалуйста, опубликовать Jsfiddle

4. @AbdulBasit это здесь jsfiddle.net/Ayan0000/qLk3jp4g/5

Ответ №1:

Взгляните на это

  
        .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 amp; 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>