twitter-bootstrap - 内部组成和文本之间的引导空间

Question

我的引导程序有一些问题：

我想在正方形和每个正方形上的所有文本之间有一个小空白。

有些文字太长，我想知道如何让它们在结尾出现一些“...”。

我试过玩css，但没有成功。

这是对应于正方形的组件（文档详细信息组件）：

<div *ngIf="document" (click)="onSelect()" class="document">
    <div>
        <label> <b>{{getName()}}</b> </label>
    </div>
    <br>
    <div *ngIf="document.date">
        <label> <b> Date: </b> </label> {{document.date}}
    </div>
    <span [ngClass]="{'glyphicon glyphicon-plus-sign': selected === false,
    'glyphicon glyphicon-ok-sign': selected === true}" ></span>
</div>

为了使所有正方形的大小相同，我使用了 css：

.document{
    height: 9em;
}

但我不知道这是否是最好的解决方案。

谢谢

编辑：

这是生成所有网页的 html 文件：

<div class=container>
  <div class="row">
    <div class="col-md-offset-3 col-md-6 col-md-offset-3 text-center">
      <div [ngClass] ="{'alert alert-success': status === 'ElasticSearch Server is working !',
            'alert alert-danger': status === 'ElasticSearch Server is down !',
             'alert-dismissible': 'true',
             'fade in': 'true'}" data-dismiss="alert">
            <strong>{{status}}</strong> 
    </div>
  </div>
</div>


<div class="row">
  <ul class="list-inline col-md-offset-2 col-md-5 col-md-offset-2" >
    <h5> <strong> Parameters:  </strong></h5>
      <li *ngIf="displayedSearchParams?.length < 1"> No parameters
      <li class="list-group-item parameters" *ngFor="let param of displayedSearchParams" >{{ param }} <span class="glyphicon glyphicon-remove-circle" (click)="onDelete(param)"></span>
      </li>
  </ul>
</div> 

<div class="row">
  <form class="form-group col-md-offset-2 col-md-8 col-md-offset-2">

    <ng2-completer placeholder="Search..." class="input-sm form-control col-md-3" [(ngModel)]="searchStr" [datasource]="options" [minSearchLength]="1" 
      (keyup)="search($event, this.ControlSearch)" 
[formControl]="ControlSearch"></ng2-completer>


    <ng2-completer placeholder="Country, region, city,..." class="input-sm form-control col-md-2" [(ngModel)]="searchCity" [datasource]="cities" [minSearchLength]="3" 
      (keyup)="search($event, this.ControlCity)" 
[formControl]="ControlCity"></ng2-completer>

    <label class="checkbox-inline text-center"><input type="checkbox" 
[formControl]="ControlCSV" (click)="onClickCSV()">CSV</label>
    <label class="checkbox-inline text-center"><input type="checkbox" 
[formControl]="ControlPictures" (click)="onClickPictures()">Pictures</label>

  </form>
</div>


<div *ngIf="documentSources" class="row">
  <app-documentlist [documentSources]="documentSources"></app-documentlist>
</div>

这里是 document-liste 组件的 html 文件：

<div class="row">
 <div *ngFor="let documentSource of documentSources" style="margin-top:20px">
    <div class="col-xs-4 col-sm-3 col-md-2">
        <app-document-details [document]="documentSource._source"> </app-document-details>
  </div>
</div>

<div class="row">
<div *ngIf="documentSources?.length < 1" class="alert alert-warning col-md-offset-3 col-md-6 col-md-offset-3 text-center">
  <p>No files found! {{documentSources}}</p>
  </div>
</div>

对于 css，我使用的是 Bootstrap 3.3.7 和一个小的 CSS：

.completer-input{
    display: inherit;
    width: 58em;
    border : none;
}

.completer-selected-row {
    color: #ffffff;
    width: 20em;
}

.col-height{
    display: flex;
    flex-direction: column;
    border-color: green;
    border-width: 0.2em
}

.parameters{
    height: 2em;
    line-height: 0.1em;
}

.document{
    height: 9em;
    border: 4em;
}

标签： twitter-bootstrap