如何使用引导程序重新调整卡片/div 的大小

编程问答 2022-05-31

问题描述

我正在使用 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>

bootstrap-4grid-systemhtmltwitter-bootstrap