Bootstrap对齐

Question

我是初学者。在这里，我无法弄清楚如何使用bootstrap实现这种布局对齐。我尝试但无法实现这一点，任何人都可以帮我做到这一点！

这是我想要实现的目标：

这里有两个并排的盒子，左边的盒子（带文字的绿色）和带有youtube视频的右边的盒子。当你调整它的大小时，那个绿色框应该像堆栈一样到达视频盒的顶部。绿色框内的文本应垂直和水平居中对齐。

Answer 1

您可以针对不同的窗口大小使用不同的CSS定义 看这里：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
在这里：http://getbootstrap.com/css/#grid-media-queries
和这里（示例匹配您的问题）：http://learnlayout.com/media-queries.html

Answer 2

您可以使用bootstrap创建该布局。您可能需要自己编写，因为bootstrap的网格通过添加填充来添加列之间的装订线。您应该能够为列添加背景颜色，但内容不会像您发布的视频示例那样触及边缘。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3">Green box</div>
        <div class="col-xs-12 col-sm-9">Video</div>
    </div>
</div>

看看这个jsfiddle for an example。

如果您想修改它，请通读Bootstrap's grid documentation。