Question

我正忙着使用angular4.x的基本youtube播放器应用程序。我正在使用一个使用rxjs的即时搜索组件，它在输入字段在400ms之后发生变化时发出请求...

我最初尝试在col-md-4 div中显示搜索结果，以便每行有三个结果。然后我遇到了一些问题，其中一些搜索结果的缩略图或文本有不同的高度，然后将换行到下一行......

然后我将flexbox样式应用于搜索结果，但似乎更好，但是有些缩略图总是丢失，而且我现在每行只有两个搜索结果，其中确实有3-4个空间。

我知道如何才能让这个工作/为什么某些视频缩略图没有显示（即使它们是由youtube API返回的）？

我的搜索结果模板：

<div class="eqrow">
    <div class="col-md-4">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
</div>

我的eqrow风格：

.eqrow {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.eqrow > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

我的搜索组件：

import {  Component, OnInit, Output, EventEmitter, ElementRef } from '@angular/core';    
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/distinctUntilChanged';

import { RestService } from '../../services/rest.service';
import { SearchResult } from '../../models/search-result.model';

@Component({
  selector: 'app-search-box',
  template: `
    <input type="text" class="form-control" placeholder="Search" [formControl]="term">
  `
})
export class SearchBoxComponent implements OnInit {
  term = new FormControl(); 
  @Output() loading: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output() results: EventEmitter<SearchResult[]> = new EventEmitter<SearchResult[]>();

  constructor(private restService: RestService) { }

  ngOnInit(): void {
        this.term.valueChanges.debounceTime(400)
        .distinctUntilChanged()
        .do(() => this.loading.emit(true))         // enable loading
        .switchMap(term => this.restService.search(term))
        .subscribe(
        (results: SearchResult[]) => {
            this.loading.emit(false);
            this.results.emit(results);
        },
        (err) => { 
          console.log(err);
          this.loading.emit(false);
        },
        () => { 
          this.loading.emit(false);
        });
  }
}

Answer 1

我用col-md-4替换了my-col类，这是一个可能会干扰Flexbox属性的Bootstrap类。

与justify-content: space-between中添加的eqrow（flex-basis: 30%}和my-col一起，我们在项目之间创建装订线默认情况下，每行的高度相同，因为align-items / àlign-content默认为stretch。

然后通过make flex项my-col flex容器（嵌套的Flexbox），可以使用Flexbox属性进一步控制其子项，Flexbox属性也可以是flex项和flex容器。

Fiddle demo

.eqrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.eqrow .my-col {
  flex-basis: 30%;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  border: 1px dotted gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="eqrow">
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
    <div class="my-col">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
</div>

尝试显示不同高度的YouTube搜索结果时出现问题

1 个答案: