gpt4 book ai didi

html - bootstrap div 不与 Canvas 对齐

转载 作者:行者123 更新时间:2023-11-27 23:09:15 25 4
gpt4 key购买 nike

我在一个带有 threeJS 的 div 中有一个 Canvas ,我想在 threejs 窗口的右侧显示紫色条(用于用户设置)。问题是出于某种原因,bootstrap 没有意识到我想将这两列放在一起,而是将它们放在不同的行上。我希望我目前正在工作,并且看不出有什么问题......我在元素的其他地方也有类似的情况,但只有 div,工作正常。除了重置边距和填充之外,没有布局 scss 代码。此组件也没有其他 html 文件在使用。

const threeCanvas = document.getElementById('threejs-canvas') as HTMLCanvasElement;
this.renderer = new THREE.WebGLRenderer({ canvas: threeCanvas });
<div class="row" style="background-color: whitesmoke; height: 100px"></div>
<div class="row">
<div class="col">
<canvas id="threejs-canvas">
<app-threejs [width]=400 [height]=350></app-threejs>
</canvas>
</div>
<div class="col-2" style="background: blueviolet; height: 621px;">test</div>
</div>

Situation

编辑:期望的结果是这样的: https://www.elfskot.nl/wp-content/uploads/2018/08/thumbnail-configurator-780x520.png

已解决:我在没有 Bootstrap 的情况下安装了 ng-bootstrap ...

最佳答案

您的 HTML 和类用法没有问题,请检查您的 Bootstrap CSS 文件是否正在加载并应用于您的页面。

<html>

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
<div class="row" style="background-color: whitesmoke; height: 100px"></div>
<div class="row">
<div class="col">
<img src="https://placehold.it/400x350">
</div>
<div class="col-2" style="background: blueviolet; height: 621px;">test</div>
</div>
</body>

</html>

关于html - bootstrap div 不与 Canvas 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58621885/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com