我怎么能改变HTML视图的外观？

Question

考虑以下Angular 2模板代码：

<div *ngIf="artist">
    <header class="artist-header">
        <div *ngIf="artist.images.length > 0">
            <img class="artist-thumb img-circle" src="{{artist.images[0].url}}">
        </div>
        <h1>{{artist.name}}</h1>
        <p *ngIf="artist.genres.length > 0">
            Genres : <span *ngFor="let genre of artist.genres">{{genre}}</span>
        </p>
    </header>
    <div class="artist-albums">

        <div class="row">

                <div class="col-md-3" *ngFor="let album of albums">
                    <div class="card bg-faded card-body album">
                        <div *ngIf="album.images.length > 0">
                            <img class="album-thumb img-thumbnail" src="{{album.images[0].url}}">
                            <h4>{{album.name}}</h4>
                            <a class="btn btn-default btn-block" routerLink="/album/{{album.id}}">Album Details</a>
                        </div>
                    </div>
                </div>

        </div>

    </div>
</div>

尽管应用了class="col-md-3"，但所有div都垂直出现在新行中。以下是显示的图像。我希望3 div应该水平显示在一行中。在上面的代码中需要更改什么？

Answer 1

如果你发布的整个代码循环显示所有这些图像，则每个col-md-3都在一个单独的row div中，每次创建一个换行符。因此，尝试在<{1}} div中创建内部的循环，仅用于row元素。

Answer 2

将其他引导选项添加到div：

col-lg-3 col-md-3 col-sm-3 col-xs-3

请确保您没有任何边距或避免使用＆＃34;！important＆＃34;来覆盖引导程序的默认宽度。标志。

尝试使用＆＃34;检查元素＆＃34;来查看实时CSS。浏览器中的选项，并尝试更改那里的数据，以便你可以弄清楚发生了什么。