如何解决如何使用引导程序重新调整卡片/div 的大小
我正在使用 bootstrap 处理 UI,我有一些 cads/divs,我使用 Bootstrap-4
网格系统展示它们并且它工作正常。
我想要的是允许用户调整这些卡片/小部件的大小。
所以我正在使用
resize: both;
overflow: auto;
在我遇到问题之前,这一切正常。
问题是我给了一些像 col-lg-3
这样的网格,所以我无法调整它的大小,因为它的总宽度是 col-lg-3
所以在这里我被困住了,不知道用什么来实现我想要的。
我的代码
<div class="row no-gutters">
<div class="col-6 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 testCard d-flex align-items-center justify-content-center">
<p>hi am a card</p>
</div>
</div>
<div class="col-6 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 testCard d-flex align-items-center justify-content-center">
<p>hi am a card2</p>
</div>
</div>
</div>
我的 css
.testCard{
background-color:#96bed6;
height:100px;
resize: both;
overflow: auto;
}
Ps- 我知道为什么会这样,因为我正在使用网格系统固定宽度,但是我需要使我的网站具有响应性,以便我使用它。
我只想知道我能做到这一点。
我的工作代码
.testCard {
background-color: #96bed6;
height: 100px;
resize: both;
overflow: auto;
}
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row no-gutters">
<div class="col-6 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 testCard d-flex align-items-center justify-content-center">
<p>hi am a card</p>
</div>
</div>
<div class="col-6 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 testCard d-flex align-items-center justify-content-center">
<p>hi am a card2</p>
</div>
</div>
</div>
</body>
</html>
我只想知道实现这一目标的最简单方法是什么,通过它我的用户界面将具有响应性,并且如果我愿意,我可以调整大小以及拖放
现在调整响应式大小对我来说很重要
解决方法
当使用网格时,这是一件非常奇怪的事情,因为您试图违背网格的目的。一种方法是将 max-width
添加到 .testcard
并且它应该让它增长,同时仍然保持网格响应。
我已将此添加到 .testcard
:
max-width: 100vw !important;
看看:
.testCard {
background-color: #96bed6;
height: 100px;
resize: both;
overflow: auto;
max-width: 100vw !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row no-gutters">
<div class="col-6 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 testCard d-flex align-items-center justify-content-center">
<p>hi am a card</p>
</div>
</div>
<div class="col-6 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 testCard d-flex align-items-center justify-content-center">
<p>hi am a card2</p>
</div>
</div>
</div>
</body>
</html>
但除此之外,如果这对您不起作用,我会考虑使用网格以外的其他东西。
,调整或缩小 Bootstrap 卡的大小
在div中添加
style="width:27rem; height:27rem;"
.testCard {
background-color: #96bed6;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Resize Bootstrap Cars</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row no-gutters">
<div class="col-6 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 testCard d-flex align-items-center justify-content-center" style="width:27rem; height:27rem;">
<p>hi am a card</p>
</div>
</div>
<div class="col-6 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 testCard d-flex align-items-center justify-content-center" style="width:500px; height:500px">
<p>hi am a card2</p>
</div>
</div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。