Bootstrap 3 - 如何将列表与iframe右侧对齐

Question

我正在尝试在bootstrap中创建此布局：

我有iframe的地方，但是我在修改它右边的ul时遇到了一些麻烦。

这是我的iframe：

class GameScene: SKScene {

    override func didMove(to: SKView) {

        // Bulb:

        let lightBulb = TouchMeSprite(color: .black, size: CGSize(width: 100, height: 100))
        // Lightbulb will turn on when you click lightswitch:
        lightBulb.personalAnimation = SKAction.colorize(with: .yellow, colorBlendFactor: 1, duration: 0)

        lightBulb.position = CGPoint(x: 0, y: 400)
        lightBulb.isUserInteractionEnabled = true
        addChild(lightBulb)


        // Switch:

        let lightSwitch = TouchMeSprite(color: .gray, size: CGSize(width: 25, height: 50))
        // Lightswitch will turn on lightbulb:
        lightSwitch.othersToAnimate = [lightBulb]

        lightSwitch.isUserInteractionEnabled = true
        lightSwitch.position = CGPoint(x: 0, y: 250)
        addChild(lightSwitch)
    }
}

以下是我的视频列表：

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

我尝试使用媒体对象尝试对齐iframe和项目，但它对我不起作用。这个问题的最佳解决方法是什么？

Answer 1

使用boostrap柱可以提供帮助。将元素放入网格系统将有助于对齐元素。 首先，如果你使用bootstrap将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没有固定的宽度或高度

希望它变得清晰 干杯

Answer 2

您可以尝试float。

在此处阅读更多内容：http://www.w3schools.com/cssref/pr_class_float.asp

在您的情况下，您只需在css中添加.right-list-videos{ float:right; }。

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