ブートストラップ3 - どのように私は、ブートストラップでこのレイアウトを作成しようとしていますインラインフレーム

Question

の右側にあるリストを整列するには：私は、IFRAMEの場所を持っているが、私はいくつかのトラブルにULを揃えるを持っています

それの右。ここで

は私のiframeです：ここでは

<iframe width="100%" height="100%" allowfullscreen frameborder="0" class="video-iframe" src]="'https://www.youtube.com/embed/' + youtube.videoId + '?rel=0' | safe" > 
</iframe> 

は、ビデオの私のリストです：

<div class="right-list-videos"> 
    <div class="list-group"> 
    <span *ngFor="let youtube of _youtube$ | async; let i = index;"> 
     <a class="list-group-item" (click)="changeVideo(i)" > 
     <div class="media" > 
      <a class="media-left" > 
      <img class="media-object " src="{{youtube.thumbnail}}" width="140px" height="105px"> 
      </a> 
      <div class="media-body"> 
      <h4 class="media-heading">{{youtube.title}}}</h4> 
      <div class="media-text">{{youtube.description}}</div> 
      </div> 
     </div> 
     </a> 

    </span> 
    </div> 
</div> 

私はIFRAMEやアイテムを試してみて、整列するメディアオブジェクトを使用して試してみましたが、それは動作しませんでした私のために。この問題についての最善の方法は何でしょうか？

Answer 1

ブーストカラムを使用すると役立ちます。グリッドシステムの内部に要素を配置すると、要素を整列させるのに役立ちます。すべての まず、ブートストラップを使用している場合は、このような列項目にIFRAMEとULを置く：

<div class="col-md-8"> 
    <iframe src="" id="video"> 
     <!-- Your Iframe inner --> 
    </iframe> 
</div> 

<div class="col-md-4"> 
    <ul class="right-list-videos"> 
     <!-- Right list content --> 
    </ul> 
</div> 

次に、あなたはまた、あなたのインラインフレームではないことを確認し、この

#video { 
    width: 100%; 
} 

.right-list-videos { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background: #f8f8f8; 
} 

のようにCSSを使用してそれらのスタイルを設定することができます

はそれを明確に 乾杯

Answer 2

あなたがfloatを試すことができますを取得願って一定の幅や高さを有します。もっとここに

読む：あなたのケースではhttp://www.w3schools.com/cssref/pr_class_float.asp

は、あなたは自分のCSSで.right-list-videos{ float:right; }を追加することができます。

それ以外の場合は、ブートストラップグリッドシステムを使用し、ビデオにcol-md-9を、リストにはcol-md-3を使用させることをお勧めします。