Bootstrap 3 - 如何将列表对齐到 iframe 的右侧答案

【问题标题】：Bootstrap 3 - how to align a list to right of iframeBootstrap 3 - 如何将列表对齐到 iframe 的右侧
【发布时间】：2017-05-01 19:56:12
【问题描述】：

我正在尝试在引导程序中创建此布局：

我有 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 和项目，但它对我不起作用。解决这个问题的最佳方法是什么？

【问题讨论】：

您是希望窗口 url 向右对齐还是仅特定容器向右对齐

标签： css twitter-bootstrap angular layout twitter-bootstrap-3

【解决方案1】：

使用 boostrap 列会有所帮助。将元素放入网格系统将有助于对齐元素。首先，如果您使用引导程序，请将 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>

然后你可以像这样使用 CSS 来设置它们的样式

#video {
    width: 100%;
}

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

还要确保您的 iframe 没有固定的宽度或高度

希望清楚干杯

【讨论】：

【解决方案2】：

你可以试试float。

在这里阅读更多：http://www.w3schools.com/cssref/pr_class_float.asp

在你的情况下，你可以在你的css中添加.right-list-videos{ float:right; }。

否则更好的选择是使用 Bootstrap Grid 系统，让视频占用col-md-9，列表占用col-md-3。

【讨论】：