如何更改 HTML 视图的外观？答案

【问题标题】：How could I change the appearance of the HTML view?如何更改 HTML 视图的外观？
【发布时间】：2018-06-28 18:45:40
【问题描述】：

考虑下面的 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"，所有divs 都垂直出现在新行中。下面是显示的图像。我希望 3 div 应该水平出现在一行中。上面的代码需要修改什么？

【问题讨论】：

请点击<>并使用例如lorempixel或占位符生成minimal reproducible example
你能展示你的完整代码吗？如果您在一行中有 5 个带有 col-md-3 的元素，您可能会破坏 Bootstrap 的网格布局。如果我能看到您的代码，会更容易提供帮助。
我刚刚添加了该组件的完整代码。你现在可以检查一下吗？

标签： html angular twitter-bootstrap css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

确保您没有任何边距或没有使用“！important”标志覆盖引导程序的默认宽度。

尝试使用浏览器中的“检查元素”选项查看实时 CSS，并尝试更改那里的数据，以便了解发生了什么。

【讨论】：