文章/答案/技术大牛

发布

社区首页 >问答首页 >基于最小宽度/高度的父DOM创建一个平方Flexbox，使用引导带(With React)

问基于最小宽度/高度的父DOM创建一个平方Flexbox，使用引导带(With React)
EN

Stack Overflow用户

提问于 2021-03-19 17:40:03

回答 1查看 85关注 0票数 0

如果可能的话，是否有一种优雅的方法可以使用具有最小自定义css和/或使用内置引导特性的引导柔性盒来创建方形卡/ div？

我的目标是在这张卡片的中间得到这个响应方格，它是基于具有一定边距的doms父级的最小宽度或高度。

所以基本上这个正方形应该是NxN大小的

N = Math.min(parentWidth, parentHeight) - (marginSize * 2);

这就是我所拥有的

<div class="d-flex flex-column min-vh-100">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a href="#home" class="navbar-brand">url.com</a>
    </nav>
    <div class="card m-5 h-100 flex-grow-1 rounded-0">
        <div class="card small-cards m-5 h-100 flex-grow-1 rounded-0 border-0">I WANT THIS TO BE SQUARE :)</div>
    </div>
</div>

html

css

reactjs

twitter-bootstrap

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-22 18:18:46

这是我能够想出的解决方案，可以满足我的需求/需要，以防这个问题出现在搜索结果中：

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css" integrity="sha384-nNK9n28pDUDDgIiIqZ/MiyO3F4/9vsMtReZK39klb/MtkZI3/LtjSjlmyVPS3KdN" crossorigin="anonymous">
    <title>url.com</title>
  </head>

  <body>
    <div class="d-flex flex-column min-vh-100">
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a href="#home" class="navbar-brand">url.com</a>
      </nav>
      <div class="d-flex flex-grow-1 justify-content-center">
        <div class="card small-card h-100 flex-grow-1 rounded-0 align-self-center" style="max-width: 85vmin; min-width: 85vmin; min-height: 85vmin; max-height: 85vmin;" />
      </div>
    </div>
  </body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66713076

复制

相似问题

问基于最小宽度/高度的父DOM创建一个平方Flexbox，使用引导带(With React)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于最小宽度/高度的父DOM创建一个平方Flexbox，使用引导带(With React)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于最小宽度/高度的父DOM创建一个平方Flexbox，使用引导带(With React)
EN