Bootstrap 4 cols не работает в угловом компоненте - PullRequest
Новая
       10

Bootstrap 4 cols не работает в угловом компоненте

0 голосов
/ 20 ноября 2018

Если у меня есть угловой компонент "боковая панель" с загрузочным кольцом внутри, сетка разрывается.

Мой app.component.html 

<div id="wrapper" style="padding-top: 80px;">
    <app-header></app-header>
    <app-searchrow></app-searchrow>
    <div class="main-container">
        <div class="container">
            <div class="row">
                <app-sidebar></app-sidebar>
                <div class="col-md-9">Content</div>
            </div>
        </div>
    </div>
    <app-footer></app-footer>
</div>

мой боковой бар.component.html 

<div class="col-md-3 sidebar">Sidebar Content</div>

, но если я использую следующее, оно работает:

мой app.component.html 

<div id="wrapper" style="padding-top: 80px;">
    <app-header></app-header>
    <app-searchrow></app-searchrow>
    <div class="main-container">
        <div class="container">
            <div class="row">
                <div class="col-md-3 sidebar">
                    <app-sidebarfilter></app-sidebarfilter>
                </div>
                <div class="col-md-9">Content</div>
            </div>
        </div>
    </div>
    <app-footer></app-footer>
</div>

мой sidebar.component.html 

<p>sidebar content</p>

Что происходит, во многих случаях было бы полезно иметь компоненты col.Но почему это не работает так, как я ожидал?Я не помню этого, когда он в последний раз работал с angular год или два назад.

Использование: bootstrap 4 angular 7.0

1 Ответ

0 голосов
/ 21 ноября 2018

сделать компонент боковой панели таким, первый уровень внутри .row ДОЛЖЕН быть col-SOMETHING

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="wrapper" style="padding-top: 80px;">
    <app-header></app-header>
    <app-searchrow></app-searchrow>
    <div class="main-container">
        <div class="container">
            <div class="row">
                <div app-sidebarfilter class="col-xs-3">sidebar</div>
                <div class="col-xs-9">Content</div>
            </div>
        </div>
    </div>
    <app-footer></app-footer>
</div>
...