如何在响应过程中使用引导程序更改宽度？
[英]how to change width using bootstrap during responsiveness?
问题描述
I'm trying to change the width of the div elements during responsiveness. 
我正在尝试在响应过程中更改div元素的宽度。 so when I reduce the screen width to around 600px the div elements should increase their width to 50%. 因此，当我将屏幕宽度减少到600px左右时，div元素应将其宽度增加到50％。
Now I noticed no breakpoint for w-* class, and was wondering is there any way to do it?? 现在我注意到w- *类没有断点，并且想知道是否有任何方法可以做到？
also I'm allowed to only use bootstrap and avoid as much as possible to add my own CSS. 也允许我仅使用引导程序，并尽可能避免添加自己的CSS。
can any one help?? 可以帮忙吗？
here is the code snippet 这是代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.d-flex>div
{
height:200px;
background-color:black;
margin-left:10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="card bg-light">
<div class="card-body d-flex align-items-center flex-wrap">
<div class="flex-grow-1">
</div>
<div class="flex-grow-1 ">
</div>
<div class="flex-grow-1 ">
</div>
<div class="flex-grow-1 ">
</div>
<div class="flex-grow-1 ">
</div>
</div>
</div>
</div>
</body>
</html>
2 个解决方案
解决方案1
0 已采纳 2018-09-14 06:53:51
you can do it with pinch of jquery code like below, 您可以使用如下所示的少量jQuery代码来做到这一点，
if(jQuery(window).width() < 601px){
jQuery('.your-div-class').addClass('w-50');
}
else {
jQuery('.your-div-class').removeClass('w-50');
}
Please make sure you have included jquery in your page as well. 请确保在页面中也包含了jquery。
解决方案2
0 2018-09-14 06:59:44
Bootstrap's break points are Small 540px and Medium 720px. Bootstrap的断点为小540px和中720px。 So you could try the following. 因此，您可以尝试以下方法。 This example defaults to 5 blocks per row, and then 2 blocks per row on a small break point.: 此示例默认为每行5个块，然后在一个小断点处每行2个块：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <style> .d-flex { height: 200px; background-color: black; border: 1px solid yellow; } </style> </head> <body> <div class="container-fluid"> <div class="card bg-light"> <div class="card-body row"> <div class="d-flex col-6 col-sm-2"> </div> <div class="d-flex col-6 col-sm-2"> </div> <div class="d-flex col-6 col-sm-2"> </div> <div class="d-flex col-6 col-sm-2"> </div> <div class="d-flex col-6 col-sm-2"> </div> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.