Question

我有一个显示搜索结果的结果div。结果在bootstrap列中。但是，列似乎有一堆填充或边距，导致我的结果超级瘦。如果我取出*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>

出于某种原因，结果非常瘦，削减了结果中的大部分内容。

这是我的意思的图像：

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

这是将鼠标悬停在bootstrap列上：

因此该列似乎有一堆填充或边距。

以下是列副本的输出样式，并从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; }

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

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

这与引导行有关。因为我有10个结果，所以它们并不都适合一行。但是我认为如果内容越过分配的列，bootstrap会简单地将内容推送到新行。

如果我拿出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。它有控制台错误，但是，它只是一个组件，因此，如果您可以使用没有任何控制台错误的确切组件创建一个有角度的2 jsfiddle，那么我们就可以开展业务：https://jsfiddle.net/n5pjgev6/89/我是从这个开始的：https://jsfiddle.net/langdonx/u7c89uuz/现在我不确定他使用的角度2的哪个版本可能是问题所在。我找不到角度2 cdn。他使用与rc5不同的语法来引导应用程序。但是，我的组件看起来并没有真正具有特定rc5的东西，所以我不认为这很重要。

Answer 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>

Answer 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>

Angular 2 * ng导致bootstrap 4列内容过于紧凑

2 个答案: