각도 2 * 부트 스트랩을 일으키는 4 열 내용이 너무 마른 것

검색 결과를 표시하는 결과 div가 있습니다. 결과는 부트 스트랩 열에 있습니다. 그러나 열에는 여백이나 여백이있는 것으로 나타나 내 결과가 매우 마른 체형이됩니다. *ngFor을 제거하고 대신 각 결과를 하드 코드하면 올바르게 표시됩니다.각도 2 * 부트 스트랩을 일으키는 4 열 내용이 너무 마른 것

<div class="row" *ngIf="!noResults"> 
    <div *ngFor="let result of results"> 
     <result [result]="result"></result> 
    </div> 
</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 인 검색 결과는 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>

이 결과는 결과의 내용의 대부분을 절단 슈퍼 스키니있다. (나는 제품 항목을 호출하고있는)

그래서 그 실제 결과 유혹한다 : 여기

무슨 뜻인지의 이미지입니다. 여기

는 부트 스트랩 열을 가리키면된다

그래서 열이 패딩이나 마진의 힙을 갖고있는 것 같아요.

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 %가되도록합니다. 고정 너비를 설정할 수 없습니다. 부트 스트랩 열로 확장 할 필요가 있습니다.

#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; }

편집 : 여기

#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입니다 : 여기

결과에 대한 내 CSS를하다 내가 부트 스트랩 열을 변경할 때 내지 컬럼-XL-12은 다음과 같습니다 :

그래서 이상한. col-xl-12는 xl 크기 화면에서 열이 화면의 전체 너비를 차지하게합니다.

부트 스트랩 행과 관련이 있습니다. 10 개의 결과가 있기 때문에 한 행에 모두 들어 맞는 것은 아닙니다. 그러나 콘텐츠가 할당 된 열을 넘으면 부트 스트랩이 단순히 콘텐츠를 새로운 행으로 푸시한다고 생각했습니다.내가 class="row"을 가지고가는 경우에

난이 얻을 :

내가 사용하는 대신이 같은 결과 템플릿에 결과를 하드 코딩하는 경우 * ngfor, 작동!

내가 문을 열어주는 말들 : - (난 그냥 didnt가 추가가없는 이미지를 신경 쓰지 않음)하지만 난 하드 코드 :(

<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가 특정한 무엇이라도있는 것처럼 나의 구성 요소는 정말로 본다.

출처

2016-09-02 BeniaminoBaggins

폭'보십시오 : 100 %'#의 image''에 – Aaron

@Aaron 감사하지만 그것은 didn를 일하지 마라. – BeniaminoBaggins

@Beniamino_Baggings 무엇이 바뀌 었습니까? – Aaron

다음 코드는 저에게 효과적입니다. 한 가지 더주의해야 할 점은 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>

출처

2017-04-01 19:01:51 ssuhas76

다른 대답은 나를 위해 일을 넣은 사람은 아니다 있는지 확인하지만,이 작품하십시오 :

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

출처

2017-11-11 16:51:46

각도 2 * 부트 스트랩을 일으키는 4 열 내용이 너무 마른 것

답변

관련 문제