загрузочный div не выравнивается по холсту - PullRequest
0 голосов
/ 30 октября 2019

У меня есть холст внутри div с threeJS, и я хочу отобразить фиолетовую полосу (которая будет для пользовательских настроек) в правой части окна threejs. Проблема в том, что по какой-то причине программа начальной загрузки не распознает, что я хочу собрать эти 2 столбца вместе, и размещает их в отдельных строках. Я ожидал бы, что у меня сейчас есть работа, и не вижу в этом ничего плохого ... У меня похожая ситуация где-то еще в проекте, но только с 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

РЕШЕНО: У меня установлен ng-bootstrap без начальной загрузки ...

1 Ответ

0 голосов
/ 30 октября 2019

Использование 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...