Angular 2 *ngFor 导致 bootstrap 4 列内容太瘦答案

【问题标题】：Angular 2 *ngFor causing bootstrap 4 column content to be too skinnyAngular 2 *ngFor 导致 bootstrap 4 列内容太瘦
【发布时间】：2017-01-11 01:15:45
【问题描述】：

我有一个显示搜索结果的结果 div。结果在引导列中。但是，这些列似乎有一堆填充或边距，导致我的结果非常瘦。如果我取出 *ngFor 并硬编码每个结果，它会正确显示。

这是遍历结果列表的 div，为每个结果创建一个显示结果：

<div id="results" class="text-uppercase">
    <div id="up-button-row" class="row">
        <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
            offset-xl-4">
            <button id="up-button" class="m-x-auto" md-fab [disableRipple]="true" (click)="scrollUp()"></button>
        </div>
    </div>
    <div class="row" *ngIf="noResults">
        <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
            offset-xl-4">
            <h2 class="m-x-auto">No vegan stuff found :-(</h2>
        </div>
    </div>
    <div class="row" *ngIf="!noResults">
        <div *ngFor="let result of results">
            <result [result]="result"></result>
        </div>
    </div>
</div>

这是保存搜索结果的位：

<div class="row" *ngIf="!noResults">
    <div *ngFor="let result of results">
        <result [result]="result"></result>
    </div>
</div>

每个搜索结果都是一个名为 result.component 的组件。这是模板：

<div class="col-sm-6 col-md-4 col-xl-3">
   <div class="product-item scale-on-hover">
      <div [ngStyle]="{background: result.image}" id="image"></div>
      <div id="info">
         <h6 id="brand" class="medium-text">{{result.brand}}</h6>
         <h6 id="name" class="medium-text">{{result.name}}</h6>
      </div>
   </div>
</div>

由于某种原因，结果超级瘦，结果中的大部分内容都被删掉了。

这是我的意思的图像：

所以它悬停在实际结果（我称之为产品项）上。

这里是悬停在引导列上：

所以该列似乎有一堆填充或边距。

这是列副本的输出样式，并从 Google Chrome 控制台的样式选项卡中粘贴：

element.style {
}
@media (min-width: 1200px)
.col-xl-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
@media (min-width: 768px)
.col-md-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.333333%;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

@media (min-width: 544px)
.col-sm-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
}
*, *::before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
user agent stylesheet
div {
    display: block;
}
Inherited from div#results.text-uppercase
.text-uppercase {
    text-transform: uppercase !important;
}
Inherited from body
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #373a3c;
    background-color: #fff;
}
Inherited from html
html {
    font-size: 16px;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
Pseudo ::before element
*, *::before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
Pseudo ::after element
*, *::before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

为什么结果这么瘦？是什么导致引导列中的边距或填充？默认宽度为 100%。我希望每个结果的宽度为列宽的 100%。我无法设置静态宽度。我需要它们与引导列一起扩展。

这是我的结果 css：

#results {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 50px;
  padding-top: 10px; }

h1 {
  margin-left: 25px;
  color: #ff8282; }

h2 {
  color: #ff8282;
  text-align: center; }

button {
  display: inherit;
  background: #00BFA5 url("../images/up-arrow.png") center no-repeat;
  background-size: 40%;
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999; }

#up-button-row {
  padding-bottom: 40px; }

这是我的结果 css：

#image {
  height: 160px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: white;
  background: center no-repeat;
  background-size: cover;
  vertical-align: bottom; }

#info {
  height: 110px;
  padding: 10px;
  background: #fc4747; }

#brand {
  text-transform: uppercase;
  color: white;
  margin-top: 0;
  margin-bottom: 5px; }

#name {
  text-transform: uppercase;
  color: white;
  margin-bottom: 5px;
  display: inline; }

div.product-item.scale-on-hover:hover {
  transform: scale(1.15); }

div.product-item {
  border: 5px solid brand-red;
  border-radius: 15px;
  height: 240px;
  overflow: hidden;
  cursor: pointer; }

编辑：当我将引导列更改为 col-xl-12 时，它看起来像这样：

太奇怪了。 col-xl-12 应该使列占据屏幕的整个宽度，因为我在 xl 大小的屏幕上。

这与引导行有关。因为我有 10 个结果，所以它们并不都适合一行。但是，我认为如果内容超出分配的列，引导程序只会将内容推送到新行。

如果我取出 class="row" 我会得到这个：

如果我像这样将结果硬编码到结果模板中，而不是使用 *ngfor，它可以工作！！但我需要遍历列表而不是硬编码:(

<div id="results" class="text-uppercase">
    <div id="up-button-row" class="row">
        <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
            offset-xl-4">
            <button id="up-button" class="m-x-auto" md-fab [disableRipple]="true" (click)="scrollUp()"></button>
        </div>
    </div>
    <div class="row" *ngIf="noResults">
        <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
            offset-xl-4">
            <h2 class="m-x-auto">No vegan stuff found :-(</h2>
        </div>
    </div>
    <div class="row" *ngIf="!noResults">
        <!--<div *ngFor="let result of results">
            <result [result]="result"></result>
        </div>-->
        <div class="col-sm-6 col-md-4 col-xl-3">
   <div class="product-item scale-on-hover">
      <div  id="image"></div>
      <div id="info">
         <h6 id="brand" class="medium-text">result.brand</h6>
         <h6 id="name" class="medium-text">result.name</h6>
      </div>
   </div>
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
   <div class="product-item scale-on-hover">
      <div  id="image"></div>
      <div id="info">
         <h6 id="brand" class="medium-text">result.brand</h6>
         <h6 id="name" class="medium-text">result.name</h6>
      </div>
   </div>
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
   <div class="product-item scale-on-hover">
      <div  id="image"></div>
      <div id="info">
         <h6 id="brand" class="medium-text">result.brand</h6>
         <h6 id="name" class="medium-text">result.name</h6>
      </div>
   </div>
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
   <div class="product-item scale-on-hover">
      <div  id="image"></div>
      <div id="info">
         <h6 id="brand" class="medium-text">result.brand</h6>
         <h6 id="name" class="medium-text">result.name</h6>
      </div>
   </div>
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
   <div class="product-item scale-on-hover">
      <div  id="image"></div>
      <div id="info">
         <h6 id="brand" class="medium-text">result.brand</h6>
         <h6 id="name" class="medium-text">result.name</h6>
      </div>
   </div>
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
   <div class="product-item scale-on-hover">
      <div  id="image"></div>
      <div id="info">
         <h6 id="brand" class="medium-text">result.brand</h6>
         <h6 id="name" class="medium-text">result.name</h6>
      </div>
   </div>
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
   <div class="product-item scale-on-hover">
      <div  id="image"></div>
      <div id="info">
         <h6 id="brand" class="medium-text">result.brand</h6>
         <h6 id="name" class="medium-text">result.name</h6>
      </div>
   </div>
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
   <div class="product-item scale-on-hover">
      <div  id="image"></div>
      <div id="info">
         <h6 id="brand" class="medium-text">result.brand</h6>
         <h6 id="name" class="medium-text">result.name</h6>
      </div>
   </div>
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
   <div class="product-item scale-on-hover">
      <div  id="image"></div>
      <div id="info">
         <h6 id="brand" class="medium-text">result.brand</h6>
         <h6 id="name" class="medium-text">result.name</h6>
      </div>
   </div>
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
   <div class="product-item scale-on-hover">
      <div  id="image"></div>
      <div id="info">
         <h6 id="brand" class="medium-text">result.brand</h6>
         <h6 id="name" class="medium-text">result.name</h6>
      </div>
   </div>
</div>
    </div>
</div>

结果（不要介意图片不存在 - 我只是没有添加它）：

我愿意接受解决方法，例如没有单独的结果组件，或者尝试使用 *ngFor 以外的其他东西来迭代结果集合。但是结果会变得更加复杂，因此理想情况下它应该是一个单独的组件。

这是jsfiddle。它有控制台错误，但是，它只是一个组件，所以如果您可以使用没有任何控制台错误的确切组件制作一个 angular 2 jsfiddle，那么我们就可以开展业务了：https://jsfiddle.net/n5pjgev6/89/ 我从这个开始：@ 987654328@ 现在我不确定他使用的是哪个版本的 angular 2，所以这可能是问题所在。我找不到 angular 2 cdn。他使用与 rc5 不同的语法引导应用程序。但是，我的组件看起来并没有任何特定于 rc5 的东西，所以我不会认为这很重要。

【问题讨论】：

在#image上尝试width: 100%
@Aaron 谢谢，但是没用。
@Beniamino_Baggings 有什么变化吗？
@Aaron 不，没有任何改变
你有我们可以使用的小提琴或实时链接吗？

标签： html css angular twitter-bootstrap-4 bootstrap-4

【解决方案1】：

其他答案对我不起作用，但这有效：

<div class="row">
<div *ngFor="let item of items" class="col-md-4 col-sm-6 col-12">
    <p>{{item.awesome}}</p>
</div>
</div>

【讨论】：

【解决方案2】：

下面的代码对我有用。这里还要注意一件事——我忘记在 index.html 文件中包含 bootstrap.css。也请检查一下

<div class="container">
<div *ngIf='projects && projects.length'>
    <div class="row">
    <div *ngFor='let project of projects'> 
        <div class="col-md-3 col-sm-4 col-xs-6">
        <h4>{{project.by}}</h4>
        </div>
    </div>
    </div>
</div>
</div>

【讨论】：